/* ==========================================================================
   Luxury Machu Picchu Tours page foundation
   ========================================================================== */

/* Page variables keep the established Peru Summit palette and 7px radius local. */
.luxury-page {
    --luxury-red: #f10100;
    --luxury-red-deep: #b90201;
    --luxury-ink: #171717;
    --luxury-copy: #5d5d5d;
    --luxury-muted: #747474;
    --luxury-line: #e8e8e4;
    --luxury-cloud: #f7f7f5;
    --luxury-warm: #fffaf5;
    --luxury-white: #ffffff;
    --luxury-radius: 7px;
    color: var(--luxury-copy);
    background: var(--luxury-white);
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

/* Text selection uses the single brand accent throughout the page. */
.luxury-page ::selection {
    color: var(--luxury-white);
    background: var(--luxury-red);
}

/* Keyboard users receive a high-contrast focus treatment on every control. */
.luxury-page :where(a, button, input, textarea):focus-visible {
    outline: 3px solid rgba(241, 1, 0, 0.35);
    outline-offset: 3px;
}

/* Anchors inherit the brand interaction color and a readable underline position. */
.luxury-page p a,
.luxury-page li a {
    color: var(--luxury-red-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Figures reset browser margins so editorial grids align precisely. */
.luxury-page figure {
    margin: 0;
}

/* Section spacing follows one compact editorial rhythm across the long page. */
.luxury-section {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
    scroll-margin-top: 64px;
}

/* Shared section headings use the established local display face. */
.luxury-page h2 {
    margin: 0;
    color: var(--luxury-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2.25rem, 4.6vw, 4.8rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-wrap: balance;
}

/* Supporting headings create a clear secondary editorial tier. */
.luxury-page h3 {
    margin: 0;
    color: var(--luxury-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
}

/* Body copy preserves a comfortable measure for the supplied long-form text. */
.luxury-page p,
.luxury-page li {
    font-size: 1rem;
    line-height: 1.75;
}

/* Consecutive paragraphs use a compact reading gap without oversized whitespace. */
.luxury-page p + p {
    margin-top: 1.15rem;
}

/* ==========================================================================
   Shared hero adjustments
   ========================================================================== */

/* The shared hero remains cinematic while leaving space for the exact long title. */
.luxury-page .tour-category-hero {
    min-height: 680px;
    height: 86svh;
}

/* Hero imagery fills the full frame with a destination-led crop. */
.luxury-page .tour-category-hero-image {
    object-position: center 52%;
}

/* The luxury title stays legible across three deliberate lines. */
.luxury-page .tour-category-hero-title {
    max-width: 15ch;
    font-size: clamp(3rem, 6vw, 6rem);
    letter-spacing: -0.035em;
    line-height: 0.96;
}

/* The hero supporting copy uses a readable width over the image. */
.luxury-page .tour-category-hero-copy {
    max-width: 56ch;
}

/* ==========================================================================
   Breadcrumb and chapter navigation
   ========================================================================== */

/* Breadcrumb keeps the supplied hierarchy available without competing with the hero. */
.luxury-breadcrumb {
    border-bottom: 1px solid var(--luxury-line);
    background: var(--luxury-white);
}

/* Breadcrumb text uses a compact label scale. */
.luxury-breadcrumb p {
    margin: 0;
    padding: 0.85rem 0;
    color: var(--luxury-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Breadcrumb links remain understated until interaction. */
.luxury-breadcrumb a {
    color: var(--luxury-ink);
    text-decoration: none;
}

/* Chapter navigation stays visible while the visitor scans the long source. */
.luxury-nav {
    position: sticky;
    z-index: 35;
    top: 0;
    border-bottom: 1px solid var(--luxury-line);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

/* Horizontal chapter links remain scrollable on narrow viewports. */
.luxury-nav-list {
    display: flex;
    align-items: stretch;
    gap: clamp(1.1rem, 3vw, 2.5rem);
    padding: 0;
    margin: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--luxury-red) var(--luxury-cloud);
}

/* Chapter links use a consistent touch-friendly height. */
.luxury-nav-link {
    position: relative;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    color: var(--luxury-muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease;
}

/* Active and hover chapter states use one restrained red cue. */
.luxury-nav-link:hover,
.luxury-nav-link:focus-visible,
.luxury-nav-link.is-active {
    color: var(--luxury-red-deep);
}

/* The active chapter indicator tracks the reader through the page. */
.luxury-nav-link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 7px 7px 0 0;
    background: var(--luxury-red);
    content: "";
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The scroll-tracked chapter reveals its full-width indicator. */
.luxury-nav-link.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

/* ==========================================================================
   Introduction and definition
   ========================================================================== */

/* Opening content uses an asymmetric editorial split between promise and proof. */
.luxury-intro-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(2.5rem, 7vw, 7rem);
}

/* The opening title remains visible while the first source paragraph is read. */
.luxury-intro header {
    position: sticky;
    top: 100px;
}

/* Introductory copy receives a stronger scale without turning into a separate card. */
.luxury-intro .luxury-reading-copy p {
    margin: 0;
    color: var(--luxury-ink);
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.72;
}

/* The definition band creates a clear pause between promise and delivery. */
.luxury-know {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: var(--luxury-red);
    color: var(--luxury-white);
}

/* The definition band balances the short title with the supplied explanation. */
.luxury-know-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

/* The definition title reverses cleanly on the brand field. */
.luxury-know h2 {
    color: var(--luxury-white);
}

/* The definition copy maintains strong contrast on red. */
.luxury-know p {
    max-width: 70ch;
    margin: 0;
    color: var(--luxury-white);
    font-size: clamp(1.05rem, 1.45vw, 1.25rem);
}

/* Links within the red definition band remain visibly interactive. */
.luxury-know a {
    color: var(--luxury-white);
    font-weight: 800;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Editorial story and service chapters
   ========================================================================== */

/* The main adventure chapter pairs the portrait source image with long-form copy. */
.luxury-story-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);
}

/* Story media clips the original photograph with the shared corner language. */
.luxury-story-media {
    overflow: hidden;
    border-radius: var(--luxury-radius);
    background: var(--luxury-cloud);
}

/* The portrait story image keeps its original vertical presence. */
.luxury-story-media img {
    width: 100%;
    height: 100%;
    min-height: 680px;
    display: block;
    object-fit: cover;
}

/* Story copy stays within a readable line length. */
.luxury-story-copy {
    max-width: 68ch;
}

/* Story heading receives deliberate separation from the first paragraph. */
.luxury-story-copy h2 {
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* The service chapter uses a quiet warm field instead of container cards. */
.luxury-service {
    background: var(--luxury-warm);
}

/* Service content creates a strong heading column and measured reading column. */
.luxury-service-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 8vw, 8rem);
}

/* Service copy uses a single top rule for structure without side borders. */
.luxury-service-copy {
    padding-top: 1.5rem;
    border-top: 1px solid var(--luxury-line);
}

/* ==========================================================================
   Planning sequence
   ========================================================================== */

/* The planning sequence creates a confident dark pause in the story. */
.luxury-steps {
    background: var(--luxury-ink);
    color: var(--luxury-white);
}

/* The steps title and exact source instructions use an asymmetric two-column grid. */
.luxury-steps-grid {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
}

/* The steps heading remains available while the visitor reads the sequence. */
.luxury-steps-heading {
    position: sticky;
    top: 100px;
}

/* The steps title reverses on the dark surface. */
.luxury-steps h2 {
    color: var(--luxury-white);
}

/* The sequence action is a compact outlined control. */
.luxury-steps-heading > a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    margin-top: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: var(--luxury-radius);
    color: var(--luxury-white);
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease;
}

/* The sequence action gains clear affordance on hover and focus. */
.luxury-steps-heading > a:hover,
.luxury-steps-heading > a:focus-visible {
    border-color: var(--luxury-white);
    background: rgba(255, 255, 255, 0.1);
}

/* Every source step becomes a distinct readable row without rewriting its text. */
.luxury-step-list p {
    padding: 1.4rem 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.84);
}

/* The final source paragraph receives stronger closing emphasis. */
.luxury-step-list p:last-child {
    color: var(--luxury-white);
    font-weight: 700;
}

/* ==========================================================================
   Reasons and local difference
   ========================================================================== */

/* The reasons section keeps its main question centered above the evidence. */
.luxury-centered-heading {
    max-width: 920px;
    margin: 0 auto clamp(3rem, 7vw, 6rem);
    text-align: center;
}

/* Reason chapters use image and copy at equal width as requested across tour layouts. */
.luxury-reason-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--luxury-radius);
    background: var(--luxury-cloud);
}

/* Consecutive reason chapters separate through whitespace rather than nested cards. */
.luxury-reason-row + .luxury-reason-row {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Reversed reason chapters alternate reading rhythm on wide screens. */
.luxury-reason-row.is-reversed .luxury-reason-media {
    order: 2;
}

/* Reason media fills exactly half the chapter. */
.luxury-reason-media img {
    width: 100%;
    height: 100%;
    min-height: 610px;
    display: block;
    object-fit: cover;
}

/* Reason copy uses generous but controlled interior spacing. */
.luxury-reason-copy {
    align-self: center;
    padding: clamp(2rem, 5vw, 4.75rem);
}

/* Paired reason topics are separated by a full horizontal rule. */
.luxury-reason-copy section + section {
    padding-top: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--luxury-line);
}

/* Reason copy maintains a readable relationship to its heading. */
.luxury-reason-copy p {
    margin: 1.2rem 0 0;
}

/* Local difference content reverses on an ink field for a decisive proof chapter. */
.luxury-difference {
    background: var(--luxury-ink);
    color: rgba(255, 255, 255, 0.82);
}

/* Local difference uses a wide editorial split without additional containers. */
.luxury-difference-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(3rem, 8vw, 8rem);
}

/* Local difference heading reverses for contrast. */
.luxury-difference h2 {
    color: var(--luxury-white);
}

/* Local difference copy keeps a comfortable line measure. */
.luxury-difference .luxury-reading-copy {
    max-width: 70ch;
}

/* ==========================================================================
   Luxury glamping feature
   ========================================================================== */

/* Glamping chapter uses the warm editorial surface behind text and photography. */
.luxury-glamping {
    background: var(--luxury-warm);
}

/* Glamping copy and source image share a balanced two-column composition. */
.luxury-glamping-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);
}

/* Glamping heading is separated clearly from its dense explanatory copy. */
.luxury-glamping-copy h2 {
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* The source booking status is retained as a compact operational line. */
.luxury-glamping-status {
    display: inline-block;
    padding-bottom: 0.45rem;
    margin: 0 0 1.25rem;
    border-bottom: 3px solid var(--luxury-red);
    color: var(--luxury-ink);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

/* The three supplied routes read as a simple itinerary index. */
.luxury-glamping-copy ul {
    padding: 0;
    margin: 2rem 0 0;
    border-top: 1px solid var(--luxury-line);
    list-style: none;
}

/* Each upcoming route occupies one uncluttered row. */
.luxury-glamping-copy li {
    position: relative;
    padding: 1rem 2rem 1rem 0;
    border-bottom: 1px solid var(--luxury-line);
    color: var(--luxury-ink);
    font-weight: 800;
}

/* A small brand dot marks the supplied routes without using a side rail. */
.luxury-glamping-copy li::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--luxury-radius);
    background: var(--luxury-red);
    content: "";
    transform: translateY(-50%);
}

/* The glamping photograph keeps a substantial destination-led crop. */
.luxury-glamping-media {
    overflow: hidden;
    border-radius: var(--luxury-radius);
}

/* Glamping imagery fills its editorial frame. */
.luxury-glamping-media img {
    width: 100%;
    min-height: 620px;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   Signature tour collection
   ========================================================================== */

/* The tour collection returns to a neutral field for clear comparison. */
.luxury-collection {
    background: var(--luxury-cloud);
}

/* Collection introduction stays centered above the denser card grid. */
.luxury-collection-heading {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

/* Collection supporting copy keeps a readable centered measure. */
.luxury-collection-heading p {
    max-width: 72ch;
    margin: 1.5rem auto 0;
}

/* The shared card grid keeps all six source tours in three columns on wide screens. */
.luxury-tour-grid {
    margin-top: clamp(3rem, 6vw, 5rem);
}

/* Shared tour cards keep the universal 7px shape throughout this page. */
.luxury-tour-grid .tour-best-card,
.luxury-tour-grid .tour-best-card-media,
.luxury-tour-grid .tour-best-card-image,
.luxury-tour-grid .tour-best-card-button,
.luxury-tour-grid .tour-best-card-badge {
    border-radius: var(--luxury-radius);
}

/* Price numerals align predictably while visitors compare itineraries. */
.luxury-tour-grid .tour-best-card-price-total {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Planning form and contact panel
   ========================================================================== */

/* The closing planning chapter uses a calm white field. */
.luxury-plan {
    background: var(--luxury-white);
}

/* Form and contact panel share the available space without crowding the copy. */
.luxury-plan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    align-items: start;
    gap: clamp(2.5rem, 7vw, 7rem);
}

/* Planning introduction keeps its source paragraph near the form. */
.luxury-plan-form > header p {
    max-width: 70ch;
    margin: 1.5rem 0 0;
}

/* Supplemental guidance uses a full outline and no decorative side border. */
.luxury-form-guidance {
    padding: 1.25rem;
    margin-top: 2rem;
    border: 1px solid var(--luxury-line);
    border-radius: var(--luxury-radius);
    background: var(--luxury-warm);
}

/* Supplemental guidance uses a compact secondary heading. */
.luxury-form-guidance h3 {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.35;
}

/* Supplemental guidance body copy remains concise. */
.luxury-form-guidance p {
    margin: 0.55rem 0 0;
    font-size: 0.94rem;
}

/* Form notices keep success and recovery messages visually distinct. */
.luxury-form-notice {
    padding: 1rem 1.1rem;
    margin-top: 1.5rem;
    border: 1px solid var(--luxury-line);
    border-radius: var(--luxury-radius);
    background: var(--luxury-cloud);
    color: var(--luxury-ink);
}

/* Error notices use the brand red for a visible recovery state. */
.luxury-form-notice.is-error {
    border-color: rgba(185, 2, 1, 0.4);
    color: var(--luxury-red-deep);
}

/* The reusable planning form uses a compact two-column field layout. */
.luxury-plan .treks-machu-form {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

/* Date and traveler count share a balanced row on wider screens. */
.luxury-plan .treks-machu-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Each form field keeps its label and control together. */
.luxury-plan .treks-machu-form-field {
    display: grid;
    gap: 0.45rem;
}

/* Form labels use the established compact action voice. */
.luxury-plan .treks-machu-form-field label {
    color: var(--luxury-ink);
    font-size: 0.82rem;
    font-weight: 900;
}

/* Form fields use quiet outlines, stable heights and the universal radius. */
.luxury-plan .treks-machu-form-field input,
.luxury-plan .treks-machu-form-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.8rem 0.9rem;
    border: 1px solid #cfcfca;
    border-radius: var(--luxury-radius);
    color: var(--luxury-ink);
    background: var(--luxury-white);
    font: inherit;
    caret-color: var(--luxury-red);
}

/* Textarea preserves room for a useful planning message. */
.luxury-plan .treks-machu-form-field textarea {
    min-height: 145px;
    resize: vertical;
}

/* Placeholder copy maintains accessible contrast. */
.luxury-plan .treks-machu-form-field input::placeholder,
.luxury-plan .treks-machu-form-field textarea::placeholder {
    color: #686868;
    opacity: 1;
}

/* Active form fields use the single red interaction cue. */
.luxury-plan .treks-machu-form-field input:focus,
.luxury-plan .treks-machu-form-field textarea:focus {
    border-color: var(--luxury-red);
    outline: 3px solid rgba(241, 1, 0, 0.16);
    outline-offset: 0;
}

/* The form submission action remains clear and touch friendly. */
.luxury-plan .treks-machu-form-submit {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    padding: 0.8rem 1.65rem;
    border: 0;
    border-radius: var(--luxury-radius);
    background: var(--luxury-red);
    color: var(--luxury-white);
    font-size: 0.82rem;
    font-weight: 900;
    transition: background-color 180ms ease, transform 180ms ease;
}

/* The form action provides a restrained physical response. */
.luxury-plan .treks-machu-form-submit:hover,
.luxury-plan .treks-machu-form-submit:focus-visible {
    background: var(--luxury-red-deep);
    transform: translateY(-2px);
}

/* Contact information is integrated with its source image in one practical panel. */
.luxury-contact {
    overflow: hidden;
    border-radius: var(--luxury-radius);
    background: var(--luxury-ink);
    color: rgba(255, 255, 255, 0.82);
}

/* Contact photography uses a clear landscape crop above the details. */
.luxury-contact > img {
    width: 100%;
    height: 320px;
    display: block;
    object-fit: cover;
}

/* Contact details receive sufficient breathing room on the dark panel. */
.luxury-contact-copy {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Contact heading reverses with a compact operational scale. */
.luxury-contact h3 {
    color: var(--luxury-white);
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

/* Contact copy keeps all supplied channels readable. */
.luxury-contact p {
    margin: 1rem 0 0;
}

/* Contact mail links remain visible on the dark surface. */
.luxury-contact p a {
    color: var(--luxury-white);
}

/* Direct contact actions sit side by side beneath the source details. */
.luxury-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Contact actions use the same 7px control shape as the rest of the page. */
.luxury-contact-actions a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--luxury-radius);
    color: var(--luxury-white);
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease;
}

/* Direct contact actions gain a clear reversed hover state. */
.luxury-contact-actions a:hover,
.luxury-contact-actions a:focus-visible {
    border-color: var(--luxury-white);
    background: rgba(255, 255, 255, 0.1);
}

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

@media (max-width: 1199.98px) {
    /* Large tablets keep image and copy balanced with tighter interior spacing. */
    .luxury-reason-copy {
        padding: 2.5rem;
    }

    /* Large tablets use two tour columns for readable card content. */
    .luxury-tour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Two-column cards no longer require a fixed title height. */
    .luxury-tour-grid .tour-best-card-title {
        min-height: 0;
    }
}

@media (max-width: 991.98px) {
    /* Tablet layouts stack major editorial splits into one reading column. */
    .luxury-intro-grid,
    .luxury-story-grid,
    .luxury-service-grid,
    .luxury-steps-grid,
    .luxury-difference-grid,
    .luxury-glamping-grid,
    .luxury-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sticky editorial headings return to normal flow when columns stack. */
    .luxury-intro header,
    .luxury-steps-heading {
        position: static;
    }

    /* Tablet story media uses a shorter, still immersive crop. */
    .luxury-story-media img,
    .luxury-glamping-media img {
        min-height: 520px;
    }

    /* Reason chapters also stack into a coherent image-first order. */
    .luxury-reason-row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Reversed chapters restore image-first ordering when stacked. */
    .luxury-reason-row.is-reversed .luxury-reason-media {
        order: 0;
    }

    /* Tablet reason images shorten to prevent oversized panels. */
    .luxury-reason-media img {
        min-height: 430px;
    }

    /* Tablet contact panel remains within a readable maximum width. */
    .luxury-contact {
        max-width: 760px;
    }
}

@media (max-width: 767.98px) {
    /* Mobile hero preserves enough height for title, detail copy and award. */
    .luxury-page .tour-category-hero {
        min-height: 650px;
        height: 88svh;
    }

    /* Mobile hero title stays within the viewport without losing hierarchy. */
    .luxury-page .tour-category-hero-title {
        max-width: 12ch;
        font-size: clamp(2.5rem, 11vw, 3.65rem);
    }

    /* Mobile section spacing tightens while retaining chapter separation. */
    .luxury-section {
        padding: 3.75rem 0;
    }

    /* Definition content stacks on phones for a natural reading order. */
    .luxury-know-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    /* Mobile story images use a practical viewport-relative height. */
    .luxury-story-media img,
    .luxury-glamping-media img {
        min-height: 430px;
    }

    /* Mobile reason images retain visual impact without exceeding one viewport. */
    .luxury-reason-media img {
        min-height: 360px;
    }

    /* Mobile reason copy uses a compact interior rhythm. */
    .luxury-reason-copy {
        padding: 1.6rem;
    }

    /* Mobile tour cards stack into one decision column. */
    .luxury-tour-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Single-column cards keep a comfortable readable width. */
    .luxury-tour-grid .tour-best-card {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    /* Mobile form fields stack date and traveler count vertically. */
    .luxury-plan .treks-machu-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Mobile form action fills the available width. */
    .luxury-plan .treks-machu-form-submit {
        width: 100%;
    }
}

@media (max-width: 420px) {
    /* Small-phone tour actions stack below price information. */
    .luxury-tour-grid .tour-best-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    /* Small-phone tour actions fill the card width. */
    .luxury-tour-grid .tour-best-card-button {
        width: 100%;
    }

    /* Small-phone contact actions use the entire available width. */
    .luxury-contact-actions a {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Reduced-motion users receive immediate interaction state changes. */
    .luxury-page *,
    .luxury-page *::before,
    .luxury-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}