/* =========================================================
   XPLORE MOTORCYCLES — BASE STYLESHEET
   Shared across every page: reset, typography, header,
   navigation, mobile menu and footer.
   ========================================================= */

/* =========================================================
   1. TOKENS
   ========================================================= */

:root {
    --xp-gold: #A38A5F;
    --xp-gold-light: #E2C28A;
    --xp-black: #111111;
    --xp-off-black: #161616;
    --xp-line: #252525;
    --xp-text-muted: #888888;
    --xp-text-soft: #CCCCCC;
    --xp-whatsapp: #25D366;
    --xp-font: 'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --xp-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --xp-header-height: 78px;
}

/* =========================================================
   2. GLOBAL RESET / TYPOGRAPHY
   ========================================================= */

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

html,
body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #FFFFFF;
    color: var(--xp-black);
    font-family: var(--xp-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button {
    font-family: inherit;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2147483647;
    width: auto;
    height: auto;
    clip-path: none;
    margin: 0;
    padding: 12px 20px;
    background-color: var(--xp-black);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}

/* =========================================================
   3. XPLORE HEADER — FIXED, TRANSPARENT AT TOP
   ========================================================= */

.xplore-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    z-index: 2147483000;
    padding: 35px 50px;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition:
        padding 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Top of page (transparent over the hero) */
.xplore-header:not(.header-scrolled):not(.menu-open) .nav-link-hero,
.xplore-header:not(.header-scrolled):not(.menu-open) .logo-main {
    color: #FFFFFF !important;
}

.xplore-header:not(.header-scrolled):not(.menu-open) .logo-sub {
    color: var(--xp-text-soft) !important;
}

.xplore-header:not(.header-scrolled):not(.menu-open) .mobile-menu-toggle span {
    background-color: #FFFFFF;
}

/* Scrolled state */
.xplore-header.header-scrolled {
    padding: 18px 50px;
    background-color: rgba(17, 17, 17, 0.94);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid #2A2A2A;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
}

.xplore-header.header-scrolled .nav-link-hero {
    color: var(--xp-text-soft) !important;
}

.xplore-header.header-scrolled .nav-link-hero:hover {
    color: var(--xp-gold) !important;
}

.xplore-header.header-scrolled .logo-main {
    color: #FFFFFF !important;
}

.xplore-header.header-scrolled .logo-sub {
    color: var(--xp-text-muted) !important;
}

.xplore-header.header-scrolled .mobile-menu-toggle span {
    background-color: #FFFFFF;
}

/* Mobile menu open state */
.xplore-header.menu-open {
    background-color: rgba(17, 17, 17, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--xp-line);
}

.xplore-header.menu-open .nav-link-hero,
.xplore-header.menu-open .logo-main {
    color: #FFFFFF !important;
}

.xplore-header.menu-open .mobile-menu-toggle span {
    background-color: #FFFFFF;
}

/* =========================================================
   4. HEADER CONTENT — LOGO + NAV
   ========================================================= */

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-wrapper {
    display: block;
    text-decoration: none !important;
    color: #FFFFFF;
}

.logo-main {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    line-height: 1;
    transition: color 0.3s ease;
}

.logo-main .logo-accent {
    color: var(--xp-gold);
}

/* The official signature, as on the Instagram profile: gold X, gold rule,
   MOTORCYCLES and the descriptor, all to one width. The descriptor needs
   about 140px to stay legible, so the signature never goes below that. */
.logo-signature {
    display: block;
    width: 168px;
    height: auto;
    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.xplore-header.header-scrolled .logo-signature {
    width: 146px;
}

.logo-signature-light {
    display: none;
}

.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) .logo-signature-dark {
    display: none;
}

.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) .logo-signature-light {
    display: block;
}

.logo-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 4px;
    text-align: left;
    transition: color 0.3s ease;
}

.desktop-menu {
    display: flex;
    gap: 35px;
    align-items: center;
}

.nav-link-hero {
    display: block;
    padding: 10px 0;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.nav-link-hero:hover {
    color: var(--xp-gold) !important;
}

.nav-caret {
    font-size: 9px;
    margin-left: 2px;
}

/* =========================================================
   5. DESKTOP DROPDOWNS
   ========================================================= */

.nav-dropdown-wrapper {
    position: relative;
}

.desktop-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 450px;
    padding: 30px;
    gap: 40px;
    background-color: var(--xp-off-black);
    border: 1px solid var(--xp-line);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    text-align: left;
    z-index: 5000;
}

.desktop-dropdown-content.dropdown-narrow {
    min-width: 280px;
    padding: 25px;
}

/* RENTALS is the first item in the menu: its dropdown opens to the right,
   under the menu, instead of across the logo. */
.desktop-dropdown-content.dropdown-left {
    right: auto;
    left: 0;
}

.nav-dropdown-wrapper:hover .desktop-dropdown-content,
.nav-dropdown-wrapper:focus-within .desktop-dropdown-content {
    display: flex;
}

.dropdown-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dropdown-title {
    display: block;
    color: var(--xp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #222222;
}

.dropdown-title + .dropdown-title,
.dropdown-column .dropdown-title:not(:first-child) {
    margin-top: 15px;
}

.desktop-dropdown-content a {
    color: var(--xp-text-soft) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    transition: all 0.2s ease;
}

.desktop-dropdown-content a:hover {
    color: #FFFFFF !important;
    padding-left: 5px;
}

/* =========================================================
   6. MOBILE MENU
   ========================================================= */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
}

.mobile-dropdown {
    display: none;
    position: fixed;
    top: var(--xp-header-height);
    left: 0;
    width: 100%;
    max-height: 80vh;
    padding: 20px 0;
    overflow-y: auto;
    background-color: rgba(17, 17, 17, 0.98);
    border-bottom: 1px solid var(--xp-line);
    z-index: 999;
}

.mobile-dropdown a {
    display: block;
    padding: 15px 40px;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid #1C1C1C;
}

.mobile-dropdown a:hover {
    color: var(--xp-gold) !important;
}

.mobile-accordion .accordion-content {
    display: none;
    padding: 15px 40px;
    background-color: var(--xp-off-black);
    text-align: left;
}

.mobile-accordion.open-active .accordion-content {
    display: block;
}

.mobile-accordion .accordion-section-title {
    display: block;
    color: var(--xp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 10px 0 5px 0;
}

.mobile-accordion .accordion-content a {
    padding: 10px 15px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border-bottom: none !important;
    color: var(--xp-text-soft) !important;
}

.accordion-caret {
    font-size: 10px;
    float: right;
}

/* =========================================================
   7. FOOTER
   ========================================================= */

.xplore-footer {
    background-color: var(--xp-black);
    color: #FFFFFF;
    padding: 40px 20px 25px 20px;
    border-top: 1px solid #222222;
    font-family: var(--xp-font);
}

.xplore-footer-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
}

.footer-col-brand {
    flex: 1.2;
    min-width: 260px;
}

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

.footer-col-social {
    flex: 0.8;
    min-width: 150px;
}

.footer-brand-name {
    margin: 0 0 8px 0;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-tagline {
    margin: 0 0 12px 0;
    color: var(--xp-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.footer-manifesto {
    margin: 0;
    width: 240px;
    max-width: 100%;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    color: var(--xp-text-muted);
    font-family: var(--xp-font-body);
    font-size: 13px;
    line-height: 1.6;
}

.footer-heading-sm.footer-cadastur-label {
    margin: 30px 0 12px 0;
}

.footer-cadastur {
    display: block;
    width: 220px;
    max-width: 100%;
    margin: 0;
    border-radius: 10px;
    opacity: 0.95;
    transition: opacity 0.2s, transform 0.2s;
}

.footer-cadastur:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.footer-cadastur img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.footer-heading {
    margin: 0 0 15px 0;
    color: var(--xp-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-heading-sm {
    margin: 0 0 10px 0;
    color: var(--xp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-hub-group {
    margin: 0 0 23px 0;
    color: var(--xp-text-soft);
    font-family: var(--xp-font-body);
    font-size: 13px;
    line-height: 1.5;
}

.footer-hub-group:last-child {
    margin-bottom: 0;
}

.footer-hub-group strong {
    display: block;
    margin-bottom: 2px;
    color: #FFFFFF;
    font-family: var(--xp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.footer-email {
    display: inline-block;
    margin: 0 0 56px 0;
    color: #FFFFFF;
    font-family: var(--xp-font-body);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-email:hover {
    color: var(--xp-gold-light);
}

.footer-support {
    font-family: var(--xp-font-body);
    font-size: 13px;
    line-height: 1.7;
}

.footer-phone {
    display: block;
    margin-bottom: 6px;
    color: var(--xp-text-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-phone:last-child {
    margin-bottom: 0;
}

.footer-phone:hover {
    color: #FFFFFF;
}

.footer-region-tag {
    margin-right: 4px;
    color: var(--xp-whatsapp);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   GIFT VOUCHER LINE — a sentence and a link under a section's own buttons.
   It takes the section's alignment; the variant only sets the colours.
   --------------------------------------------------------------------------- */
.gift-nudge {
    margin-top: 26px;
    font-family: var(--xp-font-body);
}

.gift-nudge .gift-nudge-text {
    margin: 0 0 8px 0;
    font-family: var(--xp-font-body);
    font-size: 13.5px !important;
    line-height: 1.6;
    font-weight: 500;
    text-wrap: pretty;
}

.gift-nudge--native .gift-nudge-text {
    font-family: inherit;
}

.gift-nudge-link {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    font-family: var(--xp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.gift-nudge-link:hover {
    opacity: 0.7;
}

/* City tour pages: the line stands alone after the last section, since it
   covers everything the page sells (tours, self-guided, Co-Rider). */
.gift-band {
    padding: 56px 20px;
    background: #FDFDFB;
    border-top: 1px solid #EAEAEA;
    text-align: center;
}

.gift-band .gift-nudge {
    margin-top: 0;
}

.gift-nudge--light .gift-nudge-text { color: #666666 !important; }
.gift-nudge--light .gift-nudge-link { color: #8C7547 !important; }

.gift-nudge--dark .gift-nudge-text { color: #AAAAAA !important; }
.gift-nudge--dark .gift-nudge-link { color: var(--xp-gold-light) !important; }

/* Pages with a look of their own (the Experiences): their fonts and colours. */
.gift-nudge--native,
.gift-nudge--native .gift-nudge-link {
    color: inherit;
}

.gift-nudge--native .gift-nudge-text {
    opacity: 0.8;
}

.footer-social-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--xp-text-soft);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: color 0.2s ease;
}

.footer-social-link span {
    color: var(--xp-gold);
    font-size: 9px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.footer-social-link:hover {
    color: #FFFFFF;
}

.footer-social-link:hover span {
    transform: translate(2px, -2px);
    color: var(--xp-gold-light);
}

.xplore-footer-bottom {
    max-width: 1400px;
    margin: 35px auto 0 auto;
    padding-top: 15px;
    border-top: 1px solid #222222;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #555555;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 1.8;
}

.xplore-footer-bottom p {
    margin: 0;
}

.footer-motto {
    text-transform: uppercase;
    font-weight: 500;
}

.footer-legal {
    width: 100%;
    margin-top: 10px !important;
    color: #333333;
    font-size: 10px;
    font-style: italic;
    letter-spacing: 0.5px;
    text-align: left;
}

/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .xplore-header {
        padding: 20px 30px;
    }

    .xplore-header.header-scrolled {
        padding: 16px 30px;
    }

    .desktop-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .xplore-header.menu-open .mobile-dropdown {
        display: block;
    }

    .xplore-header.menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .xplore-header.menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .xplore-header.menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .xplore-footer-grid {
        gap: 35px;
    }

}

@media (max-width: 575px) {

    .xplore-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .logo-main {
        font-size: 21px;
    }

    .logo-signature,
    .xplore-header.header-scrolled .logo-signature {
        width: 140px;
    }

    .footer-col-brand,
    .footer-col,
    .footer-col-social {
        flex: 1 1 100%;
        min-width: 0;
    }

    .footer-hub-group { margin-bottom: 10px; }
    .footer-email { margin-bottom: 15px; }

}

/* =========================================================
   9. GOOGLE REVIEWS SECTION
   Present at the foot of every page. Slide widths are also
   declared in some page stylesheets with identical values.
   ========================================================= */

.xplore-reviews-section {
    background-color: var(--xp-black);
    color: #FFFFFF;
    padding: 72px 20px 64px;
    border-top: 1px solid #1C1C1C;
    border-bottom: 1px solid #1C1C1C;
    text-align: center;
    overflow: hidden;
    font-family: var(--xp-font);
}

.reviews-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 60px;
}

.reviews-heading {
    margin: 0 0 10px 0;
    color: #FFFFFF;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.2;
}

.reviews-kicker {
    margin: 0 0 60px 0;
    color: var(--xp-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.reviews-carousel {
    position: relative;
    width: 100%;
}

.carousel-window {
    position: relative;
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: 30px;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.review-slide,
.about-review-slide {
    flex: 0 0 calc(50% - 15px);
    width: calc(50% - 15px);
    box-sizing: border-box;
    padding: 45px 40px;
    background-color: var(--xp-off-black);
    border-left: 3px solid var(--xp-gold);
    text-align: left;
}

.carousel-track > .review-slide:nth-child(even) {
    border-left-color: #FFFFFF;
}

.review-text {
    margin: 0 0 30px 0;
    color: #E0E0E0;
    font-size: 15px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.7;
}

.review-author {
    margin: 0 0 12px 0;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--xp-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.review-stars {
    letter-spacing: 2px;
    color: var(--xp-gold-light);
}

.review-sep {
    color: #444444;
}

.reviews-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 10px;
    background: none;
    border: none;
    color: var(--xp-gold);
    font-family: monospace;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease;
}

.reviews-arrow:hover {
    color: #FFFFFF;
}

.reviews-arrow-prev {
    left: -50px;
}

.reviews-arrow-next {
    right: -50px;
}

.reviews-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
}

.reviews-cta-btn {
    display: inline-block;
    padding: 14px 35px;
    border: 1px solid var(--xp-gold);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.reviews-cta-btn:hover {
    background-color: var(--xp-gold);
    color: var(--xp-black);
}

@media (max-width: 991px) {

    .xplore-reviews-section {
        padding: 56px 10px 48px;
    }

    .reviews-inner {
        padding: 0 10px;
    }

    .reviews-heading {
        font-size: 26px;
    }

    .review-slide,
    .about-review-slide {
        flex: 0 0 100%;
        width: 100%;
        padding: 35px 28px;
    }

    .reviews-arrow {
        display: none;
    }

}

/* =========================================================
   10. HEADER OVER A PALE PAGE
   Pages that open on a near-white section get dark nav type
   until the header goes solid on scroll. Toggled by
   applyBackdrop() in app.js.
   ========================================================= */

.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) {
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) .logo-main,
.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) .nav-link-hero {
    color: var(--xp-black) !important;
}

.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) .logo-sub {
    color: #777777 !important;
}

.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) .nav-link-hero:hover {
    color: var(--xp-gold) !important;
}

.xplore-header.header-on-light:not(.header-scrolled):not(.menu-open) .mobile-menu-toggle span {
    background-color: var(--xp-black);
}

/* =========================================================
   11. SECTION SPACING CORRECTIONS
   Where two same-coloured sections meet, their stacked
   padding left a 200px empty band.
   ========================================================= */

.page-co-rider-experience .xplore-corider-master-wrapper > div:nth-child(2) {
    padding-bottom: 40px !important;
}

.page-co-rider-experience .xplore-corider-master-wrapper > div:nth-child(3) {
    padding-top: 20px !important;
}

/* =========================================================
   12. FLEET CARD AWAITING ITS PHOTOGRAPH
   Shown only where no verified photograph of that exact
   model exists yet. A neutral motif is used on purpose:
   a picture of a different machine under a model name is
   worse than no picture at all.
   ========================================================= */

.fleet-photo-pending {
    background-color: #1A1A1A;
    border: 1px solid #262626;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fleet-photo-pending svg {
    width: 74px;
    height: auto;
    fill: none;
    stroke: #55483210;
    stroke: rgba(163, 138, 95, 0.28);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   13. LANGUAGE SWITCHER
   Reuses the nav dropdown mechanics, narrower. Pure CSS on
   hover/focus so it works without JavaScript and stays
   crawlable. A language still being translated is listed as
   plain text marked "soon" rather than a link.
   ========================================================= */

.lang-switch {
    margin-left: 4px;
}

.lang-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}

.lang-globe {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    opacity: 0.85;
    flex: 0 0 auto;
}

.lang-menu {
    min-width: 200px;
    padding: 22px 24px;
}

.lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--xp-text-soft) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

a.lang-option:hover {
    color: #FFFFFF !important;
    padding-left: 5px;
}

.lang-option.is-current {
    color: var(--xp-gold-light) !important;
    cursor: default;
}

.lang-option.is-current::after {
    content: '\2713';
    font-size: 11px;
    color: var(--xp-gold);
}

.lang-option.is-pending {
    color: #6E6E6E !important;
    cursor: default;
}

.lang-option.is-pending em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--xp-gold);
    border: 1px solid rgba(163, 138, 95, 0.4);
    border-radius: 2px;
    padding: 2px 5px;
}

/* Mobile drawer */

.mobile-lang {
    padding: 18px 40px 4px 40px;
    border-top: 1px solid #1C1C1C;
    text-align: left;
}

.mobile-lang-option {
    display: block;
    padding: 9px 0;
    color: var(--xp-text-soft) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

a.mobile-lang-option:hover {
    color: #FFFFFF !important;
}

.mobile-lang-option.is-current {
    color: var(--xp-gold-light) !important;
}

.mobile-lang-option.is-pending {
    color: #6E6E6E !important;
}

.mobile-lang-option.is-pending em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--xp-gold);
    border: 1px solid rgba(163, 138, 95, 0.4);
    border-radius: 2px;
    padding: 2px 5px;
    margin-left: 6px;
}

@media (max-width: 1140px) {

    /* Eight items since EXPERIENCES joined the menu: at 992px a 26px gap put
       RENTALS against the logo and the language switcher past the edge. */
    .desktop-menu {
        gap: 20px;
    }

}

/* With the full 35px gaps the menu needs about 1160px in English and about
   1220px in Spanish or German (ALQUILER ... CONTACTO). A step in between. */
@media (min-width: 1141px) and (max-width: 1280px) {

    /* English too: at 1141px its 35px gaps left only 13px beside the logo */
    .desktop-menu {
        gap: 24px;
    }

    html:not([lang^="en"]) .desktop-menu {
        gap: 20px;
    }

    html:not([lang^="en"]) .nav-link-hero {
        letter-spacing: 1.5px;
    }

}

/* Only above the mobile breakpoint: below it the header has its own padding. */
@media (min-width: 992px) and (max-width: 1140px) {

    /* ALQUILER, QUIÉNES SOMOS, EXPERIENCIAS, GESCHICHTEN: the translated
       labels are ~690px of text on their own, which leaves no room for 20px
       gaps next to the logo at 1000px. English keeps its spacing. */
    html:not([lang^="en"]) .desktop-menu {
        gap: 13px;
    }

    html:not([lang^="en"]) .nav-link-hero {
        letter-spacing: 1.2px;
    }

    .logo-signature {
        width: 146px;
    }

    .xplore-header,
    .xplore-header.header-scrolled {
        padding-left: 32px;
        padding-right: 32px;
    }

}

/* Montserrat and Inter carry no CJK glyphs, so name the Chinese label in a
   font that does instead of leaving it to an arbitrary fallback. */
.lang-option[lang^="zh"],
.mobile-lang-option[lang^="zh"] {
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                 'Noto Sans SC', var(--xp-font);
    font-size: 14px;
}

/* =========================================================
   14. CHINESE (SIMPLIFIED) PAGE TYPOGRAPHY

   Montserrat and Inter carry no CJK glyphs. Without this the
   browser falls back face by face and the type changes shape
   mid-sentence, which is the single most obvious tell of an
   afterthought translation.

   Two habits of the Latin design also have to be corrected,
   and both are scoped to the Chinese pages only:

   * fixed pixel tracking. The pages carry ~580 inline
     letter-spacing declarations of 1-5px, meant to open up
     short uppercase Latin labels. On Chinese it spaces every
     single character, so a five-character heading reads as
     five separate words. Replaced with proportional tracking,
     which is the CJK convention and scales with type size.
     It needs !important only because the values are inline.

   * weights 800 and 900. Montserrat really has them; almost
     no CJK face does, so the browser fakes them and the
     result is a smear. Turning weight synthesis off makes it
     use the heaviest weight the face actually ships.
   ========================================================= */

html[lang^="zh"] {
    --xp-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Noto Sans SC', 'Source Han Sans SC', 'Montserrat', sans-serif;
    --xp-font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                    'Noto Sans SC', 'Source Han Sans SC', 'Inter', sans-serif;
}

html[lang^="zh"] body,
html[lang^="zh"] body *:not(.logo-main):not(.logo-sub):not(.logo-accent) {
    letter-spacing: 0.06em !important;
    font-synthesis-weight: none;
}

/* The wordmark stays Latin and keeps its own tracking. */
html[lang^="zh"] .logo-main,
html[lang^="zh"] .logo-sub,
html[lang^="zh"] .logo-accent {
    font-family: var(--xp-font), 'Montserrat', sans-serif;
}

/* CJK needs more leading than Latin at the same size. */
html[lang^="zh"] p,
html[lang^="zh"] li,
html[lang^="zh"] .review-text {
    line-height: 1.85;
}

/* =========================================================
   15. "WHERE WE HAVE RIDDEN" — GALLERY (tours page)
   Follows section 9's dark-band treatment so the page reads
   as one design: gold kicker, wide caps heading, black band.
   The grid is intrinsic — no fixed columns — so a region with
   five photographs and one with nine both look deliberate.
   ========================================================= */

.xp-gal {
    background-color: var(--xp-black);
    color: #FFFFFF;
    padding: 120px 20px;
    border-top: 1px solid #1C1C1C;
    font-family: var(--xp-font);
    text-align: center;
}

.xp-gal-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.xp-gal-kicker {
    margin: 0 0 10px 0;
    color: var(--xp-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-gal-title {
    margin: 0 0 18px 0;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.2;
}

.xp-gal-lead {
    max-width: 680px;
    margin: 0 auto 70px auto;
    color: var(--xp-text-soft);
    font-family: var(--xp-font-body);
    font-size: 15px;
    line-height: 1.7;
}

.xp-gal-region + .xp-gal-region {
    margin-top: 64px;
}

.xp-gal-region-name {
    margin: 0 0 22px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--xp-line);
    color: var(--xp-gold-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: left;
}

.xp-gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

/* a button, not a div: the lightbox has to open from the keyboard too */
.xp-gal-item {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--xp-line);
    background: var(--xp-off-black);
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    transition: border-color 0.3s, transform 0.3s;
}

.xp-gal-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

.xp-gal-item:hover,
.xp-gal-item:focus-visible {
    border-color: var(--xp-gold);
    transform: translateY(-2px);
    outline: none;
}

.xp-gal-item:hover img {
    opacity: 0.82;
}

/* --- lightbox ---------------------------------------------------------- */

/* The HTML "hidden" attribute is only "display: none" in the browser stylesheet,
   so the "display: flex" below beats it and the overlay covers the page on load.
   This has to come with it. */
.xp-gal-lightbox[hidden] {
    display: none;
}

.xp-gal-lightbox {
    position: fixed;
    inset: 0;
    /* the reference site pins its header at z-index 2147483000 and some page
       overlays sit at 5000, so a lightbox has to clear all of it */
    z-index: 2147483001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.94);
    cursor: zoom-out;
}

.xp-gal-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: default;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.xp-gal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border: 1px solid #333;
    background: rgba(17, 17, 17, 0.9);
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
}

.xp-gal-close:hover,
.xp-gal-close:focus-visible {
    border-color: var(--xp-gold);
    color: var(--xp-gold-light);
    outline: none;
}

/* Arrows, the counter and a swipe target. The arrows sit clear of the
   photograph on a wide screen and overlap its edges on a narrow one,
   where there is no room beside it. */
.xp-gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 72px;
    border: 1px solid #333;
    background: rgba(17, 17, 17, 0.82);
    color: #FFFFFF;
    font-size: 34px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, background 0.3s;
    z-index: 1;
}

.xp-gal-nav[hidden] { display: none; }   /* the trap that broke the lightbox once */

.xp-gal-prev { left: 18px; }
.xp-gal-next { right: 18px; }

.xp-gal-nav:hover,
.xp-gal-nav:focus-visible {
    border-color: var(--xp-gold);
    color: var(--xp-gold-light);
    background: rgba(17, 17, 17, 0.95);
    outline: none;
}

.xp-gal-counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #BBBBBB;
    font-size: 12px;
    letter-spacing: 2px;
}

.xp-gal-lightbox-img {
    touch-action: pan-y;
}

@media (max-width: 991px) {
    .xp-gal { padding: 80px 16px; }
    .xp-gal-nav { width: 44px; height: 60px; font-size: 28px; }
    .xp-gal-prev { left: 4px; }
    .xp-gal-next { right: 4px; }
    .xp-gal-title { font-size: 28px; letter-spacing: 2px; }
    .xp-gal-lead { margin-bottom: 48px; }
    .xp-gal-region + .xp-gal-region { margin-top: 44px; }
    .xp-gal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
    .xp-gal-lightbox { padding: 16px; }
}

@media (max-width: 575px) {
    .xp-gal-grid { grid-template-columns: repeat(2, 1fr); }
    .xp-gal-title { font-size: 23px; }
}

/* =========================================================
   16. STORIES — index and post pages
   The other 23 pages sell; these are read. That difference is
   the whole design: one narrow column, larger type, generous
   line height. Everything else on the site is a grid of cards
   at 15px — a 700-word story set that way is not read, it is
   skimmed and abandoned.
   ========================================================= */

/* --- index ------------------------------------------------------------- */

.xp-stories-index {
    background-color: var(--xp-black);
    color: #FFFFFF;
    padding: 130px 20px 120px;
    font-family: var(--xp-font);
}

.xp-stories-head {
    max-width: 1180px;
    margin: 0 auto 70px auto;
    text-align: center;
}

.xp-stories-kicker {
    margin: 0 0 12px 0;
    color: var(--xp-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-stories-title {
    margin: 0 0 20px 0;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.1;
}

.xp-stories-lead {
    max-width: 1040px;
    margin: 0 auto;
    color: var(--xp-text-soft);
    font-family: var(--xp-font-body);
    font-size: 16px;
    line-height: 1.75;
    text-wrap: balance;
}

.xp-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.xp-story-card {
    display: flex;
    flex-direction: column;
    background-color: var(--xp-off-black);
    border: 1px solid var(--xp-line);
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.3s, transform 0.3s;
}

.xp-story-card:hover {
    border-color: var(--xp-gold);
    transform: translateY(-3px);
}

.xp-story-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: #1d1d1d;
}

.xp-story-card-body {
    display: block;
    padding: 26px 26px 30px;
}

.xp-story-card-place {
    display: block;
    margin-bottom: 10px;
    color: var(--xp-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-story-card-title {
    display: block;
    margin-bottom: 12px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    color: #FFFFFF;
}

.xp-story-card-excerpt {
    display: block;
    margin-bottom: 18px;
    color: var(--xp-text-soft);
    font-family: var(--xp-font-body);
    font-size: 14px;
    line-height: 1.65;
}

.xp-story-card-more {
    display: block;
    color: var(--xp-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- post -------------------------------------------------------------- */

.xp-story-hero {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--xp-black);
}

.xp-story-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.88) 100%);
}

.xp-story-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px 70px;
    width: 100%;
}

.xp-story-kicker {
    margin: 0 0 14px 0;
    color: var(--xp-gold-light);
    font-family: var(--xp-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.xp-story-title {
    margin: 0;
    max-width: 900px;
    color: #FFFFFF;
    font-family: var(--xp-font);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

.xp-story-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 70px 24px 20px;
    font-family: var(--xp-font-body);
    color: #2A2A2A;
    font-size: 17px;
    line-height: 1.8;
}

.xp-story-lead {
    margin: 0 0 40px 0;
    font-size: 20px;
    line-height: 1.7;
    color: #111111;
}

.xp-story-body h2 {
    margin: 50px 0 18px 0;
    font-family: var(--xp-font);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--xp-black);
}

.xp-story-body p {
    margin: 0 0 22px 0;
}

/* the photo grid inside a story breaks out wider than the text column */
.xp-story-body .xp-gal-grid {
    width: calc(100% + 220px);
    max-width: 100vw;
    margin: 44px 0 44px -110px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* grids with a fixed count: a pair sits inside the text column, centred and
   as wide as the paragraphs; four break out wide in one even row */
.xp-story-body .xp-gal-grid.xp-gal-grid--2 {
    width: 100%;
    margin: 44px 0;
    grid-template-columns: repeat(2, 1fr);
}
.xp-story-body .xp-gal-grid.xp-gal-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.xp-story-facts {
    margin: 50px 0 0 0;
    padding: 30px 32px;
    background-color: #F6F4F0;
    border-left: 3px solid var(--xp-gold);
}

.xp-story-facts h2 {
    margin: 0 0 16px 0;
}

.xp-story-facts ul {
    margin: 0;
    padding-left: 20px;
}

.xp-story-facts li {
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.7;
}

/* --- the three calls to action ----------------------------------------- */

.xp-story-cta {
    margin-top: 90px;
    padding: 90px 20px 100px;
    background-color: var(--xp-black);
    color: #FFFFFF;
    text-align: center;
    font-family: var(--xp-font);
}

.xp-story-cta-heading {
    margin: 0 0 46px 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.xp-story-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}

.xp-story-cta-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px 26px 30px;
    background-color: var(--xp-off-black);
    border: 1px solid var(--xp-line);
    text-align: left;
    text-decoration: none !important;
    transition: border-color 0.3s, background-color 0.3s;
}

.xp-story-cta-card:hover {
    border-color: var(--xp-gold);
    background-color: #1b1b1b;
}

.xp-story-cta-kicker {
    color: var(--xp-gold);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.xp-story-cta-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.xp-story-cta-more {
    margin-top: auto;
    padding-top: 8px;
    color: var(--xp-gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .xp-stories-index { padding: 100px 16px 80px; }
    .xp-stories-title { font-size: 32px; letter-spacing: 2px; }
    .xp-story-hero { min-height: 52vh; }
    .xp-story-title { font-size: 28px; }
    .xp-story-hero-inner { padding-bottom: 44px; }
    .xp-story-body { padding: 48px 20px 10px; font-size: 16px; }
    .xp-story-lead { font-size: 18px; }
    .xp-story-body .xp-gal-grid {
        width: 100%;
        margin: 32px 0;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .xp-story-body .xp-gal-grid.xp-gal-grid--2,
    .xp-story-body .xp-gal-grid.xp-gal-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .xp-story-cta { margin-top: 60px; padding: 60px 16px 70px; }
    .xp-story-cta-heading { font-size: 22px; }
}

/* =========================================================
   N. VIÚVAS TIPOGRÁFICAS
   Impede a última linha com uma palavra solta — "a decade.",
   "BENDS", "machines." — que é o que mais denuncia texto
   jogado num container em vez de composto.

   `balance` iguala o comprimento das linhas e é o certo para
   título curto (o navegador só aplica até ~6 linhas).
   `pretty` cuida do corpo de texto: não equaliza tudo, apenas
   puxa palavra para cima quando a última linha ficaria curta.

   Navegador sem suporte simplesmente quebra como antes: não
   há degradação, só ausência de melhoria.
   ========================================================= */

h1, h2, h3, h4,
.hero-title, .hero-subtitle,
.section-title, .section-heading,
.reviews-heading {
    text-wrap: balance;
}

p, li, blockquote, figcaption,
.xp-story-lead,
.card-bike-desc, .reviews-kicker {
    text-wrap: pretty;
}

/* O hero da home e das cidades usa estilo inline para cor e largura,
   mas não declara text-wrap — então a regra acima alcança esses
   parágrafos normalmente. */

/* Parágrafo de hero: curto, centralizado, no máximo 3 ou 4 linhas. Aqui
   `balance` é melhor que `pretty` — iguala as linhas em vez de só evitar a
   palavra solta, que é o que dá o acabamento de peça composta.

   A mira é o `max-width:780px` do estilo inline, assinatura desses parágrafos
   nas 28 ocorrências do site. Se algum dia eles ganharem uma classe própria,
   troque o seletor por ela: é mais legível e não depende da largura. */
p[style*="max-width:780px"],
p[style*="max-width: 780px"] {
    text-wrap: balance;
}

/* O <br> dentro do h1 é removido pelo gerador (build.pl), depois da tradução
   ser aplicada: enquanto ele existe no DOM, o navegador desliga o `balance`
   acima e o título volta a terminar com palavra solta. Nada a fazer por aqui —
   esta nota existe só para a próxima pessoa não reintroduzir a quebra. */

/* =========================================================
   TOUCH NAVIGATION ON SMALL SCREENS

   The carousel arrows sit at left/right: -50px, in the margin
   beside a wide desktop container. On a phone that margin does
   not exist, so they were simply off the screen — and the
   review arrows were switched off outright. With no swipe
   either, a reader on a phone had no way at all to reach the
   second motorcycle or the second review.

   Swipe is handled in app.js. These rules bring the arrows
   back, inside the container and dark enough to read over a
   photograph.
   ========================================================= */

@media (max-width: 991px) {

    .reviews-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 22px;
        border-radius: 50%;
        background-color: rgba(17, 17, 17, 0.72);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .reviews-arrow-prev,
    #prevBtn { left: 2px !important; }

    .reviews-arrow-next,
    #nextBtn { right: 2px !important; }

    /* The fleet arrows carry their position in a style attribute, so the
       override has to outrank it. */
    #prevBtn,
    #nextBtn,
    #fleetPrevBtn,
    #fleetNextBtn,
    #aboutPrevBtn,
    #aboutNextBtn,
    #guidePrevBtn,
    #guideNextBtn {
        /* Twenty page stylesheets switch these off below 600px -- a decision
           that made sense only while there was no way to swipe either. */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        left: auto !important;
        right: auto !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        font-size: 22px !important;
        border-radius: 50% !important;
        background-color: rgba(17, 17, 17, 0.72) !important;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    #fleetPrevBtn,
    #aboutPrevBtn,
    #guidePrevBtn { left: 2px !important; }

    #fleetNextBtn,
    #aboutNextBtn,
    #guideNextBtn { right: 2px !important; }
}

/* =========================================================
   PHOTO LIGHTBOX ARROWS
   Created by app.js, which also adds swipe and arrow keys.
   ========================================================= */

.xp-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(17, 17, 17, 0.6);
    color: var(--xp-gold-light);
    font-family: monospace;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.xp-lb-arrow:hover {
    background-color: rgba(17, 17, 17, 0.9);
    color: #FFFFFF;
}

.xp-lb-prev { left: 12px; }
.xp-lb-next { right: 12px; }

@media (max-width: 575px) {
    .xp-lb-arrow { width: 42px; height: 42px; font-size: 22px; }
    .xp-lb-prev { left: 6px; }
    .xp-lb-next { right: 6px; }
}

/* The 60px side gutters on the carousel wrappers exist to hold arrows that sit
   at -50px, outside the container. On a phone they only shrink the cards: the
   fleet card was 215px of a 375px screen. With the arrows moved inside, the
   gutter has nothing left to hold.

   The selector matches the inline style those wrappers carry, the same way the
   hero paragraphs are matched above. Give them a class if they ever get one. */
@media (max-width: 991px) {
    div[style*="padding: 0 60px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Brand signature in the footer. It replaces the wordmark text, so it carries
   the same weight in the layout; the name lives in the img alt. The regional
   lockups (Brazil, Spain) have an extra line and are therefore taller at the
   same width — the height attribute on each img reflects that, so the space is
   reserved before the file loads and the footer does not jump. */
.footer-brand-mark {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    margin: 0 0 4px 0;
}

@media (max-width: 575px) {
    .footer-brand-mark { width: 200px; }
    .footer-manifesto { width: 200px; }
}

/* =========================================================================
   CITY HUB PAGES (porto.html first): everything we offer in one city.
   Shared here so every city page uses the same blocks.
   ========================================================================= */

.city-offer { background-color: #FFFFFF; border-bottom: 1px solid #EAEAEA; padding: 0 20px; }
.city-offer-grid {
    max-width: 1300px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid #EAEAEA;
}
.city-offer-tile {
    display: flex; flex-direction: column; gap: 8px;
    padding: 34px 28px 30px 28px;
    border-right: 1px solid #EAEAEA;
    text-decoration: none; color: var(--xp-black);
    transition: background-color 0.25s ease;
}
.city-offer-tile:hover { background-color: #FAF8F3; }
.city-offer-num { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--xp-gold); }
.city-offer-title { font-size: 15px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.city-offer-text { font-family: var(--xp-font-body); font-size: 13.5px; line-height: 1.55; color: #666666; flex: 1; }
.city-offer-more { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--xp-gold); }

.city-block { padding: 100px 20px; background-color: #FDFDFB; border-bottom: 1px solid #EAEAEA; scroll-margin-top: var(--xp-header-height); }
.bt-card[id] { scroll-margin-top: calc(var(--xp-header-height) + 24px); }
.city-block-dark { background-color: var(--xp-black); border-bottom-color: #1C1C1C; }
.city-block-inner { max-width: 1300px; margin: 0 auto; }
.city-block-head { text-align: center; max-width: 760px; margin: 0 auto 55px auto; }
.city-block-kicker { color: var(--xp-gold) !important; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 10px 0; }
.city-block-title { font-size: 36px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 20px 0; color: var(--xp-black) !important; }
.city-block-dark .city-block-title { color: #FFFFFF !important; }
.city-block-lead { font-family: var(--xp-font-body); font-size: 15px; line-height: 1.7; color: #666666 !important; margin: 0; }
.city-block-dark .city-block-lead { color: #A9A9A9 !important; }

.city-route-grid, .city-bike-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.city-route-card { background-color: #161616; border: 1px solid #252525; display: flex; flex-direction: column; }
.city-route-photo { height: 210px; background-size: cover; background-position: center; }
.city-route-body { padding: 28px 26px 30px 26px; display: flex; flex-direction: column; flex: 1; }
.city-route-kind, .city-bike-kind { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--xp-gold); margin-bottom: 10px; }
.city-route-title { font-size: 20px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #FFFFFF !important; margin: 0 0 8px 0; }
.city-route-meta { font-size: 12.5px; font-weight: 700; color: var(--xp-gold-light) !important; margin: 0 0 18px 0; }
.city-route-stops { list-style: none; margin: 0; padding: 0; font-family: var(--xp-font-body); font-size: 13.5px; line-height: 1.5; color: #BBBBBB; }
.city-route-stops li { position: relative; padding: 0 0 9px 18px; }
.city-route-stops li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--xp-gold); }
.city-route-stops li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 15px; bottom: -1px; width: 1px; background-color: #3A3A3A; }

.city-bike-card { background-color: #FFFFFF; border: 1px solid #EBEBE8; display: flex; flex-direction: column; text-decoration: none; color: var(--xp-black); transition: all 0.3s ease; }
.city-bike-card:hover { border-color: var(--xp-gold); box-shadow: 0 15px 35px rgba(0,0,0,0.06); transform: translateY(-4px); }
.city-bike-photo { height: 230px; background-color: #FFFFFF; background-size: contain; background-repeat: no-repeat; background-position: center; background-origin: content-box; padding: 14px 18px; box-sizing: border-box; border-bottom: 1px solid #F0F0EC; }
.city-bike-body { padding: 24px 24px 26px 24px; }
.city-bike-title { font-size: 19px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; margin: 0 0 8px 0; color: var(--xp-black) !important; }
.city-bike-price { font-size: 13.5px; font-weight: 800; margin: 0 0 6px 0; color: var(--xp-black) !important; }
.city-bike-note { font-family: var(--xp-font-body); font-size: 12px; color: #777777 !important; margin: 0; }

.city-block-ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 50px; }
.city-btn { display: inline-block; padding: 16px 30px; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; }
.city-btn-gold { background-color: var(--xp-gold-light); color: var(--xp-black) !important; }
.city-btn-gold:hover { background-color: #FFFFFF; }
.city-btn-line { border: 1px solid #FFFFFF; color: #FFFFFF !important; }
.city-btn-line:hover { background-color: #FFFFFF; color: var(--xp-black) !important; }
.city-btn-dark { background-color: var(--xp-black); color: #FFFFFF !important; }
.city-btn-dark:hover { background-color: var(--xp-gold); }

@media (max-width: 991px) {
    .city-offer-grid { grid-template-columns: repeat(2, 1fr); }
    .city-offer-tile { border-bottom: 1px solid #EAEAEA; }
    .city-route-grid, .city-bike-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .city-block-title { font-size: 28px; }
}
@media (max-width: 575px) {
    .city-offer-grid { grid-template-columns: 1fr; }
    .city-block { padding: 70px 16px; }
    .city-offer-tile { padding: 22px 22px 20px 22px; gap: 6px; }
}

/* Co-Rider on a city page: a photo that shows the experience, a real review
   and the four perks, above the route cards (same idea as Barcelona's block). */
.city-corider-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: stretch; margin-bottom: 50px; }
.city-corider-photo { margin: 0; min-height: 380px; position: relative; overflow: hidden; border: 1px solid #252525; }
.city-corider-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-corider-side { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; text-align: left; }
.city-corider-quote { margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--xp-gold); }
.city-corider-stars { color: var(--xp-gold-light); letter-spacing: 2px; font-size: 12px; display: block; margin-bottom: 10px; }
.city-corider-quote p { font-family: var(--xp-font-body); font-style: italic; font-size: 17px; line-height: 1.6; color: #FFFFFF !important; margin: 0 0 14px 0; }
.city-corider-quote cite { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; }
.city-corider-quote cite span { display: block; margin-top: 3px; font-weight: 600; color: var(--xp-gold); }
.city-corider-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.city-corider-perks li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; }
.city-corider-perks li span { display: block; margin-top: 4px; font-family: var(--xp-font-body); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #A9A9A9; }
.city-corider-perks svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: var(--xp-gold-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 991px) {
    .city-corider-intro { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
    .city-corider-photo { min-height: 280px; }
}
@media (max-width: 575px) { .city-corider-perks { grid-template-columns: 1fr; } }