/* ============================================================
   MOXUAN INTERNATIONAL LIMITED - Script: Imperial Munich
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
    font-family: 'Ultra Player';
    src: url('/UltraPlayerRegular-7Oanw.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Minder';
    src: url('/MinderRegular-2voA3.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Imperial Munich';
    src: url('/ImperialMunich-j9lM0.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- Variables ---------- */
:root {
    --gold: #C28A3A;
    --gold-deep: #A8722B;
    --gold-soft: #E7C98C;
    --terra: #D8431F;
    --terra-deep: #B53414;
    --night: #14110C;
    --ivory: #FBF7EF;
    --stone: #6E6455;
    --rule: #E3D8C4;
    --font-display: 'Ultra Player', Arial, sans-serif;
    --font-main: 'Minder', Arial, sans-serif;
    --font-script: 'Imperial Munich', cursive;
    --transition: 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: var(--night);
    background: var(--ivory);
    overflow-x: hidden;
}

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

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

button {
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

.mxn-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Shared: label, tag, pill, ghost, swash, dots, blob, sprout ---------- */
.mxn-label {
    font-size: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--terra);
}

.mxn-tag {
    display: inline-block;
    font-size: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px 3px;
    border-radius: 999px;
}

.mxn-tag--terra {
    background: var(--terra);
    color: var(--ivory);
}

.mxn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 35px 14px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--night);
    font-size: 21px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.mxn-pill i {
    font-size: 12px;
    transition: transform var(--transition);
}

.mxn-pill:hover {
    background: var(--night);
    color: var(--gold);
    transform: translateY(-2px);
}

.mxn-pill:hover i {
    transform: translateX(4px);
}

.mxn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 21px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--night);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--night);
    transition: color var(--transition), border-color var(--transition);
}

.mxn-ghost i {
    font-size: 11px;
}

.mxn-ghost:hover {
    color: var(--terra);
    border-color: var(--terra);
}

.mxn-swash {
    width: 200px;
    height: 16px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 4;
    stroke-linecap: round;
}

.mxn-dots {
    position: absolute;
    right: -6px;
    bottom: 18px;
    width: 84px;
    height: 84px;
    background-image: radial-gradient(var(--night) 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    opacity: 0.85;
}

.mxn-blob {
    position: absolute;
    z-index: 0;
    background: var(--gold);
    clip-path: polygon(8% 14%, 30% 2%, 64% 6%, 92% 0%, 100% 30%, 96% 70%, 70% 98%, 34% 92%, 6% 100%, 0% 62%, 4% 30%);
}

.mxn-blob--gold {
    top: -28px;
    right: -28px;
    width: 88%;
    height: 88%;
}

.mxn-sprout {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Reveal on scroll ---------- */
.mxn-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.mxn-reveal.mxn-reveal--in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Header ---------- */
.mxn-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--ivory);
    transition: box-shadow var(--transition);
}

.mxn-header.mxn-header--scrolled {
    box-shadow: 0 10px 30px rgba(20, 17, 12, 0.08);
}

.mxn-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
}

.mxn-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mxn-brand__mark {
    height: 50px;
    width: auto;
}

.mxn-brand__word {
    font-size: 32px;
    letter-spacing: 1px;
    color: var(--night);
}

.mxn-brand__sprout {
    margin-top: -8px;
    display: none;
}

.mxn-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100vh;
    padding: 96px 24px 40px;
    background: var(--ivory);
    transform: translateY(-100%);
    transition: transform var(--transition);
}

.mxn-nav.mxn-nav--open {
    transform: translateY(0);
}

.mxn-nav__link {
    font-size: 26px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--night);
    padding: 8px 0;
    position: relative;
    transition: color var(--transition);
}

.mxn-nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--terra);
    transform: translateX(-50%);
    transition: width var(--transition);
}

.mxn-nav__link:hover,
.mxn-nav__link--active {
    color: var(--terra);
}

.mxn-nav__link:hover::after,
.mxn-nav__link--active::after {
    width: 60%;
}

.mxn-nav__cta {
    margin-top: 18px;
}

.mxn-header__cta {
    display: none;
}

/* ---------- Burger: asymmetric lines, no plate ---------- */
.mxn-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    z-index: 960;
}

.mxn-burger__line {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--night);
    transition: transform var(--transition), opacity var(--transition), width var(--transition), background var(--transition);
}

.mxn-burger__line--short {
    width: 16px;
}

.mxn-burger:hover .mxn-burger__line {
    background: var(--terra);
}

.mxn-burger.mxn-burger--open .mxn-burger__line {
    width: 26px;
    background: var(--gold);
}

.mxn-burger.mxn-burger--open .mxn-burger__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mxn-burger.mxn-burger--open .mxn-burger__line:nth-child(2) {
    opacity: 0;
}

.mxn-burger.mxn-burger--open .mxn-burger__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.mxn-hero {
    background: var(--ivory);
    padding-top: 48px;
    padding-bottom: 64px;
}

.mxn-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mxn-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.mxn-hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 64px;
    line-height: 0.95;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--night);
}

.mxn-hero__swash {
    margin: 10px 0 24px;
}

.mxn-hero__manifest {
    font-size: 20px;
    line-height: 1.4;
    color: var(--stone);
    max-width: 480px;
    margin-bottom: 25px;
}

.mxn-hero__actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.mxn-hero__right {
    position: relative;
    padding: 28px 28px 0 0;
}

.mxn-hero__photo {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.mxn-hero__photo img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

/* ============================================================
   501px and up
   ============================================================ */
@media (min-width: 501px) {
    .mxn-hero__title {
        font-size: 88px;
    }

    .mxn-hero__photo img {
        height: 520px;
    }
}

/* ============================================================
   769px and up
   ============================================================ */
@media (min-width: 769px) {
    .mxn-header__inner {
        min-height: 88px;
    }

    .mxn-hero {
        padding-top: 64px;
        padding-bottom: 80px;
    }

    .mxn-hero__title {
        font-size: 108px;
    }

    .mxn-swash {
        width: 260px;
    }

    .mxn-hero__photo img {
        height: 560px;
    }
}

/* ============================================================
   1025px and up: desktop nav, hero two columns
   ============================================================ */
@media (min-width: 1025px) {
    .mxn-nav {
        position: static;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 30px;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
        transform: none;
    }

    .mxn-nav__link {
        font-family: var(--font-main);
        font-size: 23px;
        letter-spacing: 2px;
        padding: 6px 0;
    }

    .mxn-nav__link::after {
        left: 0;
        transform: none;
    }

    .mxn-nav__link:hover::after,
    .mxn-nav__link--active::after {
        width: 100%;
    }

    .mxn-nav__cta {
        display: none;
    }

    .mxn-header__cta {
        display: inline-flex;
    }

    .mxn-burger {
        display: none;
    }

    .mxn-hero__inner {
        grid-template-columns: 1.02fr 0.98fr;
        gap: 56px;
    }

    .mxn-hero__title {
        font-size: 128px;
    }

    .mxn-hero__photo img {
        height: 600px;
    }
}

/* ============================================================
   1280px and up
   ============================================================ */
@media (min-width: 1280px) {
    .mxn-hero__title {
        font-size: 144px;
    }
}

/* ============================================================
   1500px and up
   ============================================================ */
@media (min-width: 1500px) {
    .mxn-hero__title {
        font-size: 160px;
    }

    .mxn-hero__photo img {
        height: 640px;
    }
}

/* ============================================================
   2K (2560px) and up
   ============================================================ */
@media (min-width: 2560px) {
    .mxn-container {
        max-width: 1520px;
    }

    .mxn-hero__title {
        font-size: 192px;
    }

    .mxn-hero__photo img {
        height: 720px;
    }
}

/* ============================================================
   500px and down
   ============================================================ */
@media (max-width: 500px) {
    .mxn-brand__sprout {
        display: none;
    }

    .mxn-hero__title {
        font-size: 52px;
    }

    .mxn-hero__photo img {
        height: 380px;
    }

    .mxn-dots {
        width: 60px;
        height: 60px;
        background-size: 12px 12px;
    }
}

/* ============================================================
   390px and down
   ============================================================ */
@media (max-width: 390px) {
    .mxn-container {
        padding: 0 16px;
    }

    .mxn-brand__word {
        font-size: 19px;
    }

    .mxn-hero__title {
        font-size: 44px;
    }

    .mxn-swash {
        width: 150px;
    }

    .mxn-pill {
        padding: 13px 22px;
        font-size: 11px;
    }
}







/* ▸ About zone */
.mxn-about {
    background: var(--ivory);
    padding: 80px 0;
}

.mxn-about__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mxn-about__photo-wrap {
    position: relative;
    padding: 0 0 28px 28px;
}

.mxn-blob--terra {
    background: var(--terra);
    top: -28px;
    left: -28px;
    width: 88%;
    height: 88%;
    clip-path: polygon(12% 0%, 40% 4%, 70% 2%, 96% 8%, 100% 38%, 94% 68%, 68% 96%, 32% 92%, 4% 98%, 0% 64%, 6% 32%);
}

.mxn-about__photo {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.mxn-about__photo img {
    width: 100%;
    height: 480px;
    object-fit: cover;
}

.mxn-about__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--night);
    margin-top: 16px;
}

.mxn-script {
    font-family: var(--font-script);
    font-style: italic;
    text-transform: none;
    color: var(--terra);
    letter-spacing: 0;
}

.mxn-about__swash {
    margin: 16px 0 28px;
}

.mxn-about__manifest {
    font-size: 17px;
    line-height: 1.65;
    color: var(--stone);
    max-width: 480px;
    margin-bottom: 40px;
}

.mxn-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    position: relative;
}

.mxn-stamp__text {
    font-size: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    text-align: center;
    line-height: 1.2;
    padding: 0 9px;
}

/* ▸ Directions zone */
.mxn-directions {
    background: var(--night);
    padding: 80px 0;
    color: var(--ivory);
}

.mxn-directions__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
}

.mxn-label--light {
    color: var(--gold-soft);
}

.mxn-directions__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--ivory);
    margin-top: 16px;
}

.mxn-directions__swash {
    margin: 16px 0 0;
    stroke: var(--gold);
}

.mxn-directions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.mxn-directions__col {
    position: relative;
    padding-top: 24px;
}

.mxn-directions__col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(231, 201, 140, 0.2);
}

.mxn-directions__icon {
    font-size: 28px;
    color: var(--gold);
    margin-bottom: 20px;
    display: block;
}

.mxn-directions__col-title {
    font-size: 22px;
    letter-spacing: 0.5px;
    color: var(--ivory);
    margin-bottom: 14px;
}

.mxn-directions__col-text {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(251, 247, 239, 0.7);
}

/* ▸ Small tablet */
@media (min-width: 501px) {
    .mxn-about__title,
    .mxn-directions__title {
        font-size: 64px;
    }

    .mxn-about__photo img {
        height: 540px;
    }

    .mxn-directions__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 48px;
    }
}

/* ▸ Tablet landscape */
@media (min-width: 769px) {
    .mxn-about,
    .mxn-directions {
        padding: 100px 0;
    }

    .mxn-about__title,
    .mxn-directions__title {
        font-size: 80px;
    }

    .mxn-about__photo img {
        height: 600px;
    }
}

/* ▸ Desktop */
@media (min-width: 1025px) {
    .mxn-about__inner {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 72px;
    }

    .mxn-directions__inner {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 64px;
        align-items: start;
    }

    .mxn-directions__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .mxn-directions__col {
        padding: 0 24px;
        border-left: 1px solid rgba(231, 201, 140, 0.2);
    }

    .mxn-directions__col:first-child {
        padding-left: 0;
        border-left: none;
    }

    .mxn-directions__col::before {
        display: none;
    }

    .mxn-about__title,
    .mxn-directions__title {
        font-size: 96px;
    }
}

/* ▸ Wide desktop */
@media (min-width: 1280px) {
    .mxn-about__title,
    .mxn-directions__title {
        font-size: 112px;
    }
}

/*  Large desktop */
@media (min-width: 1500px) {
    .mxn-about__photo img {
        height: 660px;
    }
}

/* ▸ Ultra-wide */
@media (min-width: 2560px) {
    .mxn-about,
    .mxn-directions {
        padding: 120px 0;
    }

    .mxn-about__title,
    .mxn-directions__title {
        font-size: 144px;
    }
}

/* ▸ Compact viewport */
@media (max-width: 500px) {
    .mxn-about,
    .mxn-directions {
        padding: 64px 0;
    }

    .mxn-about__title,
    .mxn-directions__title {
        font-size: 42px;
    }

    .mxn-stamp {
        width: 110px;
        height: 110px;
    }
}

/* ▸ Narrow viewport */
@media (max-width: 390px) {
    .mxn-about__title,
    .mxn-directions__title {
        font-size: 36px;
    }

    .mxn-directions__col-title {
        font-size: 19px;
    }
}







/*  Featured zone */
.mxn-featured {
    background: var(--ivory);
    padding: 80px 0;
}

.mxn-featured__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
}

.mxn-featured__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--night);
    margin-top: 16px;
}

.mxn-featured__swash {
    margin: 16px 0 32px;
}

.mxn-featured__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

/* ▸ Card structure */
.mxn-card__visual {
    position: relative;
    padding: 20px 20px 0 0;
    margin-bottom: 24px;
}

.mxn-card__visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.mxn-blob--night {
    background: var(--night);
    top: -20px;
    right: -20px;
    width: 85%;
    height: 85%;
    clip-path: polygon(10% 0%, 35% 5%, 65% 0%, 95% 10%, 100% 40%, 90% 70%, 60% 95%, 25% 90%, 0% 95%, 5% 60%, 0% 25%);
}

.mxn-card__info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.mxn-card__title {
    font-size: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--night);
    white-space: nowrap;
}

.mxn-card__sub {
    font-size: 16px;
    color: var(--stone);
    flex: 1;
}

.mxn-card__arrow {
    color: var(--night);
    font-size: 14px;
    transition: transform var(--transition), color var(--transition);
}

.mxn-card:hover .mxn-card__arrow {
    transform: translateX(6px);
    color: var(--terra);
}

/* ▸ Small tablet */
@media (min-width: 501px) {
    .mxn-featured__title {
        font-size: 64px;
    }

    .mxn-featured__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ▸ Tablet landscape */
@media (min-width: 769px) {
    .mxn-featured {
        padding: 100px 0;
    }

    .mxn-featured__title {
        font-size: 80px;
    }

    .mxn-card__visual img {
        height: 480px;
    }
}

/* ▸ Desktop */
@media (min-width: 1025px) {
    .mxn-featured__inner {
        grid-template-columns: 0.7fr 1.3fr;
        gap: 72px;
        align-items: start;
    }

    .mxn-featured__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .mxn-featured__title {
        font-size: 96px;
    }
}

/* ▸ Wide desktop */
@media (min-width: 1280px) {
    .mxn-featured__title {
        font-size: 112px;
    }
}

/* ▸ Large desktop */
@media (min-width: 1500px) {
    .mxn-card__visual img {
        height: 520px;
    }
}

/* ▸ Ultra-wide */
@media (min-width: 2560px) {
    .mxn-featured {
        padding: 120px 0;
    }

    .mxn-featured__title {
        font-size: 144px;
    }
}

/* ▸ Compact viewport */
@media (max-width: 500px) {
    .mxn-featured {
        padding: 64px 0;
    }

    .mxn-featured__title {
        font-size: 42px;
    }

    .mxn-card__visual img {
        height: 360px;
    }

    .mxn-card__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ▸ Narrow viewport */
@media (max-width: 390px) {
    .mxn-featured__title {
        font-size: 36px;
    }
}



/* ============================================================
   MOXUAN INTERNATIONAL LIMITED — Dominant & Wider
   File: style.css | Prefix: .mxn-
   ============================================================ */

/* ▸ Dominant zone (terracotta stripe) */
.mxn-dominant {
    background: var(--terra);
    padding: 80px 0;
    color: var(--ivory);
}

.mxn-dominant__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    position: relative;
}

.mxn-dominant__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--ivory);
    margin-top: 16px;
}

.mxn-dominant__swash {
    margin: 16px 0 0;
    stroke: var(--gold-soft);
}

.mxn-dominant__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.mxn-dominant__item {
    position: relative;
    padding-left: 24px;
    border-left: 1px solid rgba(251, 247, 239, 0.3);
}

.mxn-dominant__icon {
    font-size: 24px;
    color: var(--gold-soft);
    margin-bottom: 16px;
    display: block;
}

.mxn-dominant__item-title {
    font-size: 20px;
    letter-spacing: 0.5px;
    color: var(--ivory);
    margin-bottom: 12px;
}

.mxn-dominant__item-text {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(251, 247, 239, 0.85);
}

.mxn-dominant__stamp {
    position: absolute;
    top: 145px;
    right: 25px;
    width: 120px;
    height: 120px;
    border: 2px solid var(--gold-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.mxn-dominant__stamp-text {
    font-size: 17px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold-soft);
    text-align: center;
    line-height: 1.3;
    padding: 0 10px;
}

/* ▸ Wider zone (cream background, photo tiles) */
.mxn-wider {
    background: var(--ivory);
    padding: 80px 0;
}

.mxn-wider__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
}

.mxn-wider__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--night);
    margin-top: 16px;
}

.mxn-wider__swash {
    margin: 16px 0 32px;
}

.mxn-wider__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.mxn-tile__photo {
    overflow: hidden;
    margin-bottom: 20px;
}

.mxn-tile__photo img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mxn-tile:hover .mxn-tile__photo img {
    transform: scale(1.03);
}

.mxn-tile__tag {
    display: inline-block;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--terra);
    margin-bottom: 5px;
}

.mxn-tile__title {
    font-size: 21px;
    letter-spacing: 0.7px;
    color: var(--night);
    margin-bottom: 5px;
}

.mxn-tile__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--stone);
}

/* ▸ Small tablet */
@media (min-width: 501px) {
    .mxn-dominant__title,
    .mxn-wider__title {
        font-size: 64px;
    }

    .mxn-dominant__grid {
        grid-template-columns: 1fr 1fr;
    }

    .mxn-wider__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ▸ Tablet landscape */
@media (min-width: 769px) {
    .mxn-dominant,
    .mxn-wider {
        padding: 100px 0;
    }

    .mxn-dominant__title,
    .mxn-wider__title {
        font-size: 80px;
    }

    .mxn-tile__photo img {
        height: 440px;
    }
}

/* ▸ Desktop */
@media (min-width: 1025px) {
    .mxn-dominant__inner {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 64px;
        align-items: start;
    }

    .mxn-dominant__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .mxn-dominant__item {
        padding: 0 24px;
        border-left: 1px solid rgba(251, 247, 239, 0.3);
    }

    .mxn-wider__inner {
        grid-template-columns: 0.7fr 1.3fr;
        gap: 72px;
        align-items: start;
    }

    .mxn-wider__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .mxn-dominant__title,
    .mxn-wider__title {
        font-size: 96px;
    }
}

/* ▸ Wide desktop */
@media (min-width: 1280px) {
    .mxn-dominant__title,
    .mxn-wider__title {
        font-size: 112px;
    }
}

/*  Large desktop */
@media (min-width: 1500px) {
    .mxn-tile__photo img {
        height: 480px;
    }
}

/*  Ultra-wide */
@media (min-width: 2560px) {
    .mxn-dominant,
    .mxn-wider {
        padding: 120px 0;
    }

    .mxn-dominant__title,
    .mxn-wider__title {
        font-size: 144px;
    }
}

/* ▸ Compact viewport */
@media (max-width: 500px) {
    .mxn-dominant,
    .mxn-wider {
        padding: 64px 0;
    }

    .mxn-dominant__title,
    .mxn-wider__title {
        font-size: 42px;
    }

    .mxn-dominant__stamp {
        width: 90px;
        height: 90px;
        top: 20px;
        right: 16px;
    }

    .mxn-dominant__stamp-text {
        font-size: 8px;
    }

    .mxn-tile__photo img {
        height: 320px;
    }
}

/* ▸ Narrow viewport */
@media (max-width: 390px) {
    .mxn-dominant__title,
    .mxn-wider__title {
        font-size: 36px;
    }

    .mxn-dominant__item-title,
    .mxn-tile__title {
        font-size: 18px;
    }
}




/* ============================================================
   MOXUAN INTERNATIONAL LIMITED — Contact Inline Form
   File: style.css | Prefix: .mxn-
   ============================================================ */

/* ▸ Contact zone */
.mxn-contact {
    background: var(--gold);
    padding: 80px 0;
}

.mxn-contact__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.mxn-label--dark {
    color: var(--night);
}

.mxn-contact__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--night);
    margin-top: 16px;
}

.mxn-contact__swash {
    margin: 16px 0 24px;
    stroke: var(--night);
}

.mxn-contact__text {
    font-size: 20px;
    line-height: 1.5;
    color: rgba(20, 17, 12, 0.8);
    max-width: 450px;
}

/* ▸ Inline form card */
.mxn-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--ivory);
    padding: 32px;
}

.mxn-form__trap {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.mxn-field__label {
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c28a3a94;
    margin-bottom: 2px;
    display: block;
}

.mxn-field__input {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid var(--night);
    border-radius: 0;
    font-family: var(--font-main);
    font-size: 15px;
    color: var(--night);
    transition: border-color var(--transition), background var(--transition);
}

.mxn-field__input:focus {
    outline: none;
    background: rgba(20, 17, 12, 0.05);
}

.mxn-field__input--invalid {
    border-color: var(--terra);
}

.mxn-field__error {
    min-height: 14px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--terra);
}

/* ▸ Radio buttons */
.mxn-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mxn-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.mxn-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mxn-radio__mark {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--night);
    position: relative;
    transition: background var(--transition);
}

.mxn-radio input:checked + .mxn-radio__mark {
    background: var(--night);
}

.mxn-radio input:checked + .mxn-radio__mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
}

.mxn-radio__text {
    font-size: 17px;
    color: var(--night);
    letter-spacing: 1px;
}

/* ▸ Checkbox */
.mxn-field--consent {
    margin-top: 8px;
}

.mxn-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.mxn-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mxn-check__mark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--night);
    margin-top: 2px;
    position: relative;
    transition: background var(--transition);
}

.mxn-check input:checked + .mxn-check__mark {
    background: var(--night);
}

.mxn-check input:checked + .mxn-check__mark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 10px;
    border: solid var(--gold);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mxn-check__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--night);
}

.mxn-check__link {
    font-weight: 600;
    color: var(--night);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.mxn-pill--dark {
    background: var(--night);
    color: var(--gold);
    align-self: flex-start;
}

.mxn-pill--dark:hover {
    background: var(--terra);
    color: var(--ivory);
}

/* ▸ Small tablet */
@media (min-width: 501px) {
    .mxn-contact__title {
        font-size: 64px;
    }
}

/* ▸ Tablet landscape */
@media (min-width: 769px) {
    .mxn-contact {
        padding: 100px 0;
    }

    .mxn-contact__title {
        font-size: 80px;
    }
}

/*  Desktop */
@media (min-width: 1025px) {
    .mxn-contact__inner {
        grid-template-columns: 1fr 1fr;
        gap: 72px;
    }

    .mxn-contact__title {
        font-size: 96px;
    }
}

/* ▸ Wide desktop */
@media (min-width: 1280px) {
    .mxn-contact__title {
        font-size: 112px;
    }
}

/*  Ultra-wide */
@media (min-width: 2560px) {
    .mxn-contact {
        padding: 120px 0;
    }

    .mxn-contact__title {
        font-size: 144px;
    }
}

/* ▸ Compact viewport */
@media (max-width: 500px) {
    .mxn-contact {
        padding: 64px 0;
    }

    .mxn-contact__title {
        font-size: 42px;
    }

    .mxn-form {
        padding: 24px;
    }
}

/* ▸ Narrow viewport */
@media (max-width: 390px) {
    .mxn-contact__title {
        font-size: 36px;
    }
}





/* ============================================================
   MOXUAN INTERNATIONAL LIMITED — Footer & Service Layer
   File: style.css | Prefix: .mxn-
   ============================================================ */

/* ▸ Footer zone */
.mxn-footer {
    background: var(--night);
    color: var(--ivory);
    padding: 80px 0 0;
}

.mxn-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(231, 201, 140, 0.15);
}

.mxn-brand__word--light {
    color: var(--ivory);
}

.mxn-footer__tagline {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(251, 247, 239, 0.7);
    margin-top: 20px;
    max-width: 350px;
    letter-spacing: 0.5px;
}

.mxn-footer__col-title {
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.mxn-footer__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mxn-footer__list a {
    font-size: 16px;
    color: rgba(251, 247, 239, 0.8);
    transition: color var(--transition);
}

.mxn-footer__list a:hover {
    color: var(--gold);
}

.mxn-footer__list--plain li {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 1px;
    color: rgba(251, 247, 239, 0.7);
}

.mxn-footer__stamp {
    width: 120px;
    height: 120px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.mxn-footer__stamp-text {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    line-height: 1.4;
}

.mxn-footer__bottom {
    padding: 24px 0;
}

.mxn-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.mxn-footer__copy {
    font-size: 16px;
    color: rgba(251, 247, 239, 0.5);
    letter-spacing: 1px;
}

.mxn-footer__legal-link {
    font-size: 16px;
    color: rgba(251, 247, 239, 0.7);
    background: none;
    border: none;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--transition);
}

.mxn-footer__legal-link:hover {
    color: var(--gold);
}

.mxn-footer__divider {
    color: rgba(251, 247, 239, 0.3);
    margin: 0 12px;
}

/* ▸ Cookie zone */
.mxn-cookie {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 1200;
    background: var(--ivory);
    border: 1px solid var(--gold);
    box-shadow: 0 10px 40px rgba(20, 17, 12, 0.15);
    transform: translateY(150%);
    transition: transform 0.5s ease;
}

.mxn-cookie.mxn-cookie--shown {
    transform: translateY(0);
}

.mxn-cookie__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
}

.mxn-cookie__text {
    font-size: 19px;
    color: var(--night);
    line-height: 1.7;
}

.mxn-cookie__link {
    background: none;
    border: none;
    color: var(--terra);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

.mxn-cookie__close {
    width: 35px;
    height: 35px;
    background: var(--night);
    color: var(--ivory);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition);
}

.mxn-cookie__close:hover {
    background: var(--terra);
}

/* ▸ Modal zone */
.mxn-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    transition: visibility 0.3s;
}

.mxn-modal.mxn-modal--open {
    visibility: visible;
}

.mxn-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 17, 12, 0.8);
    backdrop-filter: blur(4px);
}

.mxn-modal__content {
    position: relative;
    background: var(--ivory);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    border-top: 4px solid var(--gold);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mxn-modal--wide .mxn-modal__content {
    max-width: 720px;
}

.mxn-modal--open .mxn-modal__content {
    transform: translateY(0);
    opacity: 1;
}

.mxn-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--night);
    color: var(--ivory);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background var(--transition);
}

.mxn-modal__close:hover {
    background: var(--terra);
}

.mxn-modal__scroll {
    padding: 48px 40px;
    overflow-y: auto;
    max-height: 90vh;
}

.mxn-modal__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 42px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--night);
    margin-top: 16px;
}

.mxn-modal__swash {
    margin: 16px 0 32px;
}

.mxn-modal__body p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--stone);
    margin-bottom: 20px;
}

/* ▸ Tabs */
.mxn-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--rule);
}

.mxn-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--stone);
    cursor: pointer;
    position: relative;
    transition: color var(--transition);
}

.mxn-tab--active {
    color: var(--night);
}

.mxn-tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold);
}

/* ▸ Form specifics */
.mxn-form--tab {
    display: none;
}

.mxn-form--tab.mxn-form--active {
    display: flex;
}

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

.mxn-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314110C' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.mxn-field__textarea {
    resize: vertical;
    min-height: 80px;
}

.mxn-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mxn-captcha-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mxn-captcha-display {
    font-size: 20px;
    letter-spacing: 4px;
    color: var(--terra);
    background: var(--rule);
    padding: 10px 16px;
    user-select: none;
}

/* ▸ Thanks message */
.mxn-thanks {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

.mxn-thanks.mxn-thanks--shown {
    display: block;
}

.mxn-thanks__icon {
    font-size: 48px;
    color: var(--gold);
    margin-bottom: 20px;
}

.mxn-thanks__title {
    font-family: var(--font-display);
    font-size: 32px;
    text-transform: uppercase;
    color: var(--night);
    margin-bottom: 16px;
}

.mxn-thanks__text {
    font-size: 16px;
    color: var(--stone);
    line-height: 1.65;
}

/* ▸ Small tablet */
@media (min-width: 501px) {
    .mxn-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .mxn-footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .mxn-field__row {
        grid-template-columns: 1fr 1fr;
    }

    .mxn-modal__title {
        font-size: 52px;
    }
}

/* ▸ Tablet landscape */
@media (min-width: 769px) {
    .mxn-footer {
        padding: 100px 0 0;
    }

    .mxn-footer__inner {
        grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
        gap: 32px;
    }

    .mxn-footer__stamp {
        margin: 0;
    }
}

/* ▸ Desktop */
@media (min-width: 1025px) {
    .mxn-modal__scroll {
        padding: 56px 48px;
    }
}

@media (max-width: 1280px) {
    .mxn-featured {
         overflow-x: hidden; 
    }
}

/* ▸ Compact viewport */
@media (max-width: 500px) {
    .mxn-footer {
        padding: 64px 0 0;
    }

    .mxn-cookie__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .mxn-modal__scroll {
        padding: 40px 24px;
    }

    .mxn-modal__title {
        font-size: 36px;
    }

    .mxn-checks {
        grid-template-columns: 1fr;
    }
}



/* ▸ Pill checkboxes (tags) */
.mxn-pill-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mxn-pill-check {
    position: relative;
    cursor: pointer;
}

.mxn-pill-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mxn-pill-check__text {
    display: inline-block;
    padding: 10px 20px 5px;
    border: 1px solid var(--night);
    border-radius: 999px;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--night);
    background: transparent;
    transition: all var(--transition);
    user-select: none;
}

.mxn-pill-check input:checked + .mxn-pill-check__text {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--night);
}

.mxn-pill-check:hover .mxn-pill-check__text {
    background: rgba(194, 138, 58, 0.1);
}

.mxn-pill-check input:checked + .mxn-pill-check__text::before {
    content: '✓ ';
    font-weight: 700;
}