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

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

.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;
    color: var(--xp-text-muted);
    font-family: var(--xp-font-body);
    font-size: 13px;
    line-height: 1.6;
}

.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 10px 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 15px 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;
}

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

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

}

/* =========================================================
   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: 120px 20px;
    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: 80px 10px;
    }

    .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: 1100px) {

    .desktop-menu {
        gap: 26px;
    }

}

/* 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: 760px;
    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 {
    margin: 0;
    color: var(--xp-text-soft);
    font-family: var(--xp-font-body);
    font-size: 16px;
    line-height: 1.75;
}

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

.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-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-stories-lead, .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. */