/* ==========================================================================
   ELITE TRIP - the homepage.

   Lays the page out and nothing else: colours, type, radii and shadows are
   the tokens in elite.css, motion is the Elite set in motion.css (Sunrise
   on the blocks marked data-et-rise, the Horizon hairline under section
   headings). Everything is scoped to .home-page, so no rule here can reach
   another page.

   The owner's rules for this page, in order of importance:
     * the first screen is a booking screen: a line, a lead, the search bar
       and the real From price;
     * every card answers before it is opened: who, how trusted, how much;
     * a few direct ways forward, never the same promise twice;
     * on a phone nothing stacks into a long single column: small things go
       two or three to a row, long lists become one sideways row;
     * calm type and short sections, kept from looking plain by the mark's
       own line art: thin gold rings, dotted gold paths, arch-shaped seats;
     * photographs never zoom; a card answers the pointer with a gold edge,
       never by lifting.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. SHARED PIECES
   -------------------------------------------------------------------------- */

/* A section heading with its "see all" link on the same line. */
.home-page .hm-row-head {
    position: relative; z-index: 1;
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px;
    flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 28px);
}
.home-page .hm-row-head h2 { font-size: var(--t-section); line-height: 1.12; }
.home-page .hm-row-head .ap-link { font-size: var(--t-small); white-space: nowrap; }
.home-page .hm-row-head .ap-link::after { content: " \203A"; }
/* The Horizon hairline under a heading draws itself when the heading rises
   in, not on page load while it is still far below the fold. Without the
   motion script the heading never gets .is-in and the line simply stands. */
.home-page .et-horizon[data-et-rise]:not(.is-in)::after { animation: none; }
.home-page .hm-row-head .et-horizon::after { margin-top: 10px; }

/* The sunrise rings of the mark: thin gold line art behind a block. Two
   solid rings, one ring of round dots and a small sun riding on it. The
   strokes stay hairline at any size. Never on top of words: every block
   that carries rings lifts its content above them. */
.home-page .hm-rings {
    position: absolute; z-index: 0; pointer-events: none;
    fill: none; stroke: var(--c-gold);
}
.home-page .hm-rings circle { vector-effect: non-scaling-stroke; stroke-width: 1; }
.home-page .hm-rings circle:first-child { stroke-opacity: 0.38; }
.home-page .hm-rings circle:nth-child(2) { stroke-opacity: 0.6; }
.home-page .hm-rings .hm-rings__dots { stroke: var(--c-bronze); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 9; stroke-opacity: 0.55; }
.home-page .hm-rings .hm-rings__sun { fill: var(--c-gold); stroke: none; }

/* --------------------------------------------------------------------------
   1. HERO: the booking screen, on a photograph
   -------------------------------------------------------------------------- */

.home-page .home-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(48px, 7vw, 100px) 0 clamp(40px, 5.5vw, 76px);
    background: linear-gradient(180deg, var(--c-primary-soft) 0%, #ffffff 100%);
    color: var(--c-ink);
}
/* Three photographs, one above the other, turning by cross-fade. The first
   is the page's largest paint and loads first; the others wait their turn. */
.home-page .hm-hero__media { position: relative; z-index: 0; }
.home-page .hm-hero__media { position: relative; z-index: 0; min-height: 320px; overflow: hidden; }
.home-page .hm-slide,
.home-page .hm-slide img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home-page .hm-slide img { object-fit: cover; object-position: 50% 45%; }
.home-page .hm-slide { animation: hm-turn 21s linear infinite; }
.home-page .hm-slide:nth-child(1) { animation-delay: -1s; }
.home-page .hm-slide:nth-child(2) { opacity: 0; animation-delay: 6s; }
.home-page .hm-slide:nth-child(3) { opacity: 0; animation-delay: 13s; }
@keyframes hm-turn {
    0% { opacity: 0; }
    4.76% { opacity: 1; }
    33.33% { opacity: 1; }
    38.1% { opacity: 0; }
    100% { opacity: 0; }
}
/* The shade that keeps the words readable: deep on the left where they sit,
   clear on the right where the people are. */
/* A thin gold line closes the photograph. */
.home-page .hm-hero { position: relative; z-index: 2; }
.home-page .hm-hero__copy { min-width: 0; max-width: 620px; }

/* The tagline sits in a small pill of dark glass with the gold mark, so it
   reads on any photograph, bright or dark. */
.home-page .hm-hero__brand {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    margin-bottom: 18px; padding: 6px 14px 6px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    color: var(--c-link);
    font-size: var(--t-micro); font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase;
}
.home-page .hm-hero__mark { flex: none; width: 13px; height: auto; }
.home-page .hm-hero__brand b { font-family: var(--f-brand); font-weight: 400; letter-spacing: 0.3em; color: var(--c-ink); }

/* A step under the system's hero size: calm, not loud. */
.home-page .home-hero h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.022em; font-weight: 700;
    color: var(--c-ink); text-shadow: none;
}
.home-page .home-hero h1 .hm-h1-a { display: block; }
/* A solid light gold, not a gradient clipped to the letters: a clipped
   gradient cannot carry a shadow, and without one it fades on a bright
   photograph. */
.home-page .home-hero h1 .hm-h1-b { display: block; color: var(--c-primary); }
.home-page .hero-subtitle {
    max-width: 480px; margin-top: 14px;
    font-size: var(--t-lead); line-height: 1.45; color: var(--c-muted);
    text-shadow: none;
}

/* The booking bar: one white capsule, three quiet fields, one gold search. */
.home-page .hm-book {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    margin-top: clamp(20px, 2.6vw, 28px);
    padding: 6px;
    border-radius: var(--r-pill);
    background: #fff; color: var(--c-ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 48px rgba(0, 0, 0, 0.32);
}
.home-page .hm-book__field {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
    min-width: 0; padding: 5px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background-color 200ms var(--ease);
}
.home-page .hm-book__field + .hm-book__field::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--c-line);
}
.home-page .hm-book__field:hover { background: var(--c-bg-alt); }
.home-page .hm-book__field > span { font-size: var(--t-micro); font-weight: 600; color: var(--c-ink); }
.home-page .hm-book__field select,
.home-page .hm-book__field input {
    width: 100%; min-width: 0; min-height: 22px; padding: 0;
    border: 0; background: transparent; color: var(--c-muted);
    font: inherit; font-size: var(--t-small); cursor: pointer;
}
.home-page .hm-book__field select { -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.home-page .hm-book__field:focus-within { background: var(--c-bg-alt); box-shadow: var(--ring); }
.home-page .hm-book__field select:focus,
.home-page .hm-book__field input:focus { outline: none; }
.home-page .hm-book__go {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
    background: var(--c-gold); color: #fff;
    font: inherit; font-size: var(--t-body); font-weight: 600; cursor: pointer;
    transition: background-color 200ms var(--ease);
}
.home-page .hm-book__go:hover { background: var(--c-gold-hover); }
.home-page .hm-book__go:focus-visible { outline: none; box-shadow: var(--ring); }

/* One thin line of promises under the bar, parted by small gold dots. */
.home-page .hm-trust {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
    margin-top: 16px; list-style: none;
    font-size: var(--t-small); line-height: 1.4; color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.home-page .hm-trust li { white-space: nowrap; }
.home-page .hm-trust li + li::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 4px; height: 4px; margin: -2px 12px 0; border-radius: 50%;
    background: var(--c-gold);
}
.home-page .hm-trust b { font-weight: 600; color: #fff; }

@media (max-width: 734px) {
    .home-page .home-hero { padding: 32px 0 28px; }
    .home-page .hm-slide img { object-position: 50% 50%; }
    /* Upright photographs on a phone, shaded from the top down. */
        /* The bar above already carries the wordmark. */
    .home-page .hm-hero__brand b { display: none; }
    .home-page .hm-hero__brand { margin-bottom: 12px; padding: 5px 12px 5px 9px; letter-spacing: 0.1em; }
    .home-page .hm-hero__mark { width: 11px; }
    .home-page .hero-subtitle { margin-top: 10px; }

    /* On a phone the bar is one small white card in two rows: what you
       want with the gold search beside it, then language and day. The
       fields keep 16px type so a phone never zooms on tap. */
    .home-page .hm-book {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
        gap: 5px; padding: 5px; border-radius: var(--r-md);
    }
    .home-page .hm-book__field {
        min-height: 44px; padding: 4px 11px;
        border-radius: 13px; background: var(--c-bg-alt);
    }
    .home-page .hm-book__field + .hm-book__field::before { display: none; }
    .home-page .hm-book__field > span { line-height: 1.2; }
    .home-page .hm-book__field:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
    .home-page .hm-book__field:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .home-page .hm-book__field:nth-child(3) { grid-area: 2 / 2 / 3 / 4; }
    .home-page .hm-book__field select,
    .home-page .hm-book__field input { min-height: 20px; font-size: 1rem; line-height: 1.25; color: var(--c-ink); }
    /* The search is the gold square beside the first field; its words
       stay for screen readers. */
    .home-page .hm-book__go { position: relative; grid-area: 1 / 3 / 2 / 4; width: 44px; min-height: 44px; padding: 0; border-radius: 13px; }
    .home-page .hm-book__go .et-i { font-size: 1.15rem; }
    .home-page .hm-book__go span {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }

    /* The line of promises stays one quiet line where it fits. */
    .home-page .hm-trust { margin-top: 12px; font-size: var(--t-micro); }
    .home-page .hm-trust li + li::before { margin-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .hm-slide { animation: none; }
}

/* --------------------------------------------------------------------------
   2. YOUR DAY, DESIGNED (a sample afternoon on one dotted gold path)
   -------------------------------------------------------------------------- */

/* Six round bubbles on one dotted gold path: meet, four stops, pay. Each
   bubble wears the ring of the mark a step outside it, on a sand halo that
   parts the dots. --b is a photo bubble, --m the smaller meet and pay
   marks, centred on the same line. */

/* Meeting is espresso and gold; paying is the gold step, like a button. */

/* The total: one dark band with the real price and the one action. */

@media (max-width: 734px) {
    /* On a phone the day is two rows of three bubbles. The path runs along
       the first row, turns down in one curve at the right and comes back
       along the second, so the day reads like a road, never a long list.
       Rows have a set height so the curve meets both lines; names stay
       narrow enough to clear it. */
    
    
    
    
    
    
    
    
    
    

    
    
    
    
}

/* --------------------------------------------------------------------------
   3. LOCAL HOSTS YOU CAN BOOK NOW (one sideways row of people)
   -------------------------------------------------------------------------- */

.home-page .market { padding-block: clamp(32px, 5vw, 64px); }

/* position:relative makes the scroller the containing block of the
   screen-reader labels inside the cards. Without it those absolutely placed
   labels belong to the rail, escape the scroller's clipping, and on a phone
   widen the whole page so the browser zooms out. */
.home-page .featured-grid {
    position: relative;
    grid-auto-columns: min(160px, 36vw);
    gap: 12px;
    padding-bottom: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.home-page .featured-card {
    position: relative;
    display: flex; flex-direction: column; min-width: 0;
    border-radius: var(--r-sm); background: #fff; overflow: hidden;
    box-shadow: var(--sh-1);
    transition: box-shadow 260ms var(--et-ease-glide);
}
.home-page .featured-card:hover { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.55), var(--sh-2); }
.home-page .featured-card:focus-within { box-shadow: var(--ring), var(--sh-1); }
/* overflow:hidden is what lets aspect-ratio win over a tall photograph. */
.home-page .featured-card-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-bg-alt-2); }
.home-page .featured-card-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 25%; }
.home-page .fc-nophoto { display: grid; place-items: center; width: 100%; height: 100%; color: var(--c-bronze); font-size: 2rem; }

/* Name, languages, price: the same three lines on every card, so every
   card stands the same height whatever a host has filled in. */
.home-page .featured-card-body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 10px 12px 12px; }
.home-page .fc-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.9375rem; line-height: 1.3; letter-spacing: 0; }
.home-page .fc-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink); text-decoration: none; }
.home-page .fc-link:hover { color: var(--c-ink); text-decoration: none; }
.home-page .fc-link:focus-visible { outline: none; }
/* The name is the card's one link; it stretches over the whole card. */
.home-page .fc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-page .fc-check { flex: none; display: inline-flex; font-size: 0.8125rem; color: var(--c-bronze); }
.home-page .fc-langs { min-height: 1.35em; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--t-micro); line-height: 1.35; color: var(--c-muted); }
.home-page .fc-price {
    margin-top: auto; padding-top: 8px; border-top: 1px solid var(--c-line);
    font-size: var(--t-micro); color: var(--c-muted); white-space: nowrap;
}
.home-page .fc-price b { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); }
.home-page .fc-skel-line { height: 12px; border-radius: 6px; margin-bottom: 6px; }
.home-page .featured-empty { padding: 32px 20px; text-align: center; color: var(--c-muted); }
@media (max-width: 734px) {
    .home-page .ap-rail__paddles { display: none; }
    .home-page .featured-card-body { padding: 9px 10px 10px; }
}

/* --------------------------------------------------------------------------
   4. STATS
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5. SAFETY, BUILT INTO EVERY BOOKING (one group of six promises)
   -------------------------------------------------------------------------- */

.home-page .trust-section { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 64px); }
.home-page .hm-rings--trust { width: 520px; height: auto; top: -260px; left: -230px; }
.home-page .hm-rings--trust .hm-rings__sun { display: none; }
.home-page .trust-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-page .trust-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: 14px; row-gap: 2px; align-items: start;
    padding: 18px; border-radius: var(--r-md); background: #fff;
}
/* The arch seat, outlined in gold. */
.home-page .trust-ico {
    grid-row: 1 / 3; display: grid; place-items: center;
    width: 38px; height: 38px; padding-top: 2px;
    border-radius: 999px;
    background: var(--c-bg-alt); color: var(--c-bronze); font-size: 1.05rem;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.7);
}
.home-page .trust-item h3 { font-size: 1rem; line-height: 1.3; }
.home-page .trust-item p { font-size: var(--t-small); line-height: 1.4; color: var(--c-muted); }
@media (max-width: 1068px) {
    .home-page .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
    /* Two to a row: seat over title over one short line. */
    .home-page .trust-grid { gap: 8px; }
    .home-page .trust-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: var(--r-sm); }
    .home-page .trust-ico { color: var(--c-success); width: 32px; height: 36px; font-size: 0.95rem; }
    .home-page .trust-item h3 { font-size: 0.9375rem; }
    .home-page .trust-item p { font-size: 0.8125rem; line-height: 1.35; }
    .home-page .hm-rings--trust { display: none; }
}

/* --------------------------------------------------------------------------
   6. WHAT WE CAN ARRANGE (six picture links, then the Concierge card)
   -------------------------------------------------------------------------- */

/* Concierge: the one dark card, the whole stay arranged. */
.home-page .hm-cg {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    margin-top: 20px; border-radius: var(--r-lg);
    background:
        radial-gradient(60% 80% at 0% 100%, rgba(165, 122, 53, 0.24), rgba(165, 122, 53, 0) 70%),
        var(--c-espresso);
    color: var(--c-on-dark);
}
.home-page .hm-rings--cg { width: 420px; height: auto; left: 42%; bottom: -250px; }
.home-page .hm-rings--cg circle:first-child { stroke-opacity: 0.22; }
.home-page .hm-rings--cg circle:nth-child(2) { stroke-opacity: 0.34; }
.home-page .hm-cg__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 4vw, 44px); }
.home-page .hm-cg__kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-gold-light);
}
.home-page .hm-cg__kicker .et-i { font-size: 1rem; color: var(--c-gold); }
.home-page .hm-cg__title { font-size: var(--t-title); line-height: 1.15; color: #fff; }
.home-page .hm-cg__title em { font-style: normal; color: var(--c-gold-light); }
.home-page .hm-cg__lead { max-width: 480px; font-size: var(--t-small); line-height: 1.5; color: var(--c-on-dark-2); }
.home-page .hm-cg__for { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.home-page .hm-cg__for li {
    padding: 4px 12px; border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px rgba(236, 206, 142, 0.38);
    font-size: var(--t-micro); color: var(--c-gold-light);
}
.home-page .hm-cg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.home-page .hm-cg__more { font-size: var(--t-small); color: var(--c-gold-light); }
.home-page .hm-cg__more::after { content: " \203A"; }
.home-page .hm-cg__more:hover { color: #fff; }
.home-page .hm-cg__photo { position: relative; z-index: 1; min-height: 100%; background: var(--c-espresso-2); }
.home-page .hm-cg__photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 80%; }

@media (max-width: 734px) {
    
    
    
    
    

    /* The photograph becomes a short strip over the words. */
    .home-page .hm-cg { grid-template-columns: minmax(0, 1fr); margin-top: 12px; border-radius: var(--r-md); }
    .home-page .hm-cg__photo { order: -1; height: 128px; min-height: 0; }
    .home-page .hm-cg__copy { gap: 10px; padding: 18px 16px 20px; }
    /* Too little room on a phone to keep the rings clear of the words. */
    .home-page .hm-rings--cg { display: none; }
    .home-page .hm-cg__actions .et-btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   7. THE CLOSE: book, or talk to a person first
   -------------------------------------------------------------------------- */

.home-page .cta-section { padding-block: clamp(36px, 5vw, 64px); }
.home-page .cta-banner {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
    border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1);
}
.home-page .hm-rings--cta { width: 360px; height: auto; top: -190px; right: -150px; }
.home-page .cta-content,
.home-page .cta-talk { position: relative; z-index: 1; padding: clamp(22px, 3.4vw, 40px); }
.home-page .cta-mark { width: 44px; height: auto; margin-bottom: 14px; }
.home-page .cta-content h2 { font-size: var(--t-title); line-height: 1.15; }
.home-page .cta-content p { margin-top: 6px; font-size: var(--t-body); color: var(--c-muted); }
.home-page .cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }
.home-page .cta-actions .ap-link { font-size: var(--t-small); }
.home-page .cta-actions .ap-link::after { content: " \203A"; }

/* The person to talk to, set apart by a gold hairline. */
.home-page .cta-talk { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.home-page .cta-talk::before {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0) 0%, var(--c-gold) 50%, rgba(37, 99, 235, 0) 100%);
}
.home-page .cta-talk__h { font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.home-page .cta-talk__p { font-size: var(--t-small); color: var(--c-muted); }
.home-page .cta-talk__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.home-page .cta-chat {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 8px 14px; border-radius: var(--r-pill);
    background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line-2);
    font-size: var(--t-small); font-weight: 600; text-decoration: none;
    transition: box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.home-page .cta-chat:hover { background: var(--c-bg-alt); box-shadow: inset 0 0 0 1px var(--c-gold); color: var(--c-ink); text-decoration: none; }
.home-page .cta-chat .et-i { font-size: 1.15rem; }
.home-page .cta-chat--wa .et-i { color: #1f9d55; }
.home-page .cta-chat--zalo .et-i { color: #0068ff; }
.home-page .cta-talk__num {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: var(--t-small); font-variant-numeric: tabular-nums; color: var(--c-ink-2);
}
.home-page .cta-talk__num .et-i { color: var(--c-bronze); }

/* The one door to the Vietnam Journal, a quiet line under the card. */
.home-page .hm-journal {
    display: flex; align-items: center; gap: 14px;
    margin-top: 14px; padding: 14px 18px; border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--c-line);
    color: var(--c-ink); text-decoration: none;
    transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.home-page .hm-journal:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.7); color: var(--c-ink); text-decoration: none; }
.home-page .hm-journal__ico {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding-top: 2px;
    border-radius: 999px; background: var(--c-espresso); color: #fff;
}
.home-page .hm-journal__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.home-page .hm-journal__copy strong { font-size: var(--t-small); font-weight: 600; }
.home-page .hm-journal__copy small { font-size: var(--t-micro); color: var(--c-muted); }
.home-page .hm-journal__go { flex: none; font-size: var(--t-small); color: var(--c-link); }
.home-page .hm-journal__go::after { content: " \203A"; }

@media (max-width: 834px) {
    .home-page .cta-banner { grid-template-columns: minmax(0, 1fr); }
    .home-page .cta-talk { padding-top: 0; }
    .home-page .cta-talk::before { top: 0; bottom: auto; left: clamp(22px, 3.4vw, 40px); right: clamp(22px, 3.4vw, 40px); width: auto; height: 1px;
        background: linear-gradient(90deg, rgba(37, 99, 235, 0) 0%, var(--c-primary) 50%, rgba(37, 99, 235, 0) 100%); }
    .home-page .cta-talk__h { padding-top: 20px; }
}
@media (max-width: 734px) {
    .home-page .cta-mark { width: 36px; margin-bottom: 10px; }
    .home-page .cta-actions .et-btn { flex: 1 1 100%; }
    .home-page .cta-actions { justify-content: center; gap: 12px; }
    .home-page .hm-rings--cta { width: 260px; top: -140px; right: -120px; }
    .home-page .hm-journal { padding: 12px 14px; gap: 12px; }
    .home-page .hm-journal__go { display: none; }
}

/* ====================================================================
   THE AIRPAZ ARRANGEMENT (2026-10-20). The hero carries the search card
   with a tab per product; under it the manage strip, the services rail,
   the destinations grid and the popular routes. Everything below uses
   the tokens; the search card itself is static/css/search-card.css.
   ==================================================================== */
.home-page .home-hero--wide { padding: 56px 0 40px; }
.home-page .hm-hero__copy--wide { max-width: 820px; margin: 0 auto; text-align: center; }
.home-page .hm-hero__copy--wide .hm-hero__brand { justify-content: center; }
.home-page .hm-hero__copy--wide .hero-subtitle { margin-left: auto; margin-right: auto; }
.home-page .hm-hero__card { margin: 28px auto 0; max-width: 1180px; }
.home-page .hm-trust--center { justify-content: center; }

/* Manage your booking: three flat doors in one row. */
.home-page .hm-manage { padding: 26px 0 8px; }
.home-page .hm-manage__h { font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px; }
.home-page .hm-manage__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-page .hm-manage__card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; min-height: 76px;
    border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg);
    color: var(--c-ink); text-decoration: none;
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.home-page .hm-manage__card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--c-line-2); }
.home-page .hm-manage__card:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-manage__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-bg-alt); color: var(--c-bronze); }
.home-page .hm-manage__ico .et-i { width: 22px; height: 22px; }
.home-page .hm-manage__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-page .hm-manage__copy strong { font-size: var(--t-body); font-weight: 600; }
.home-page .hm-manage__copy small { font-size: var(--t-small); color: var(--c-muted); }

/* Arranged by Elite Trip: a sideways row of picture tiles. */
.home-page .hm-promo { padding-top: 28px; }
.home-page .hm-promo__rail { position: relative; }
.home-page .hm-promo__track {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 6px max(16px, calc((100% - 1180px) / 2)) 18px;
}
.home-page .hm-promo__track::-webkit-scrollbar { display: none; }
.home-page .hm-promo__tile {
    flex: 0 0 340px; scroll-snap-align: start; position: relative; aspect-ratio: 16 / 9;
    border-radius: var(--r-lg); overflow: hidden; background: var(--c-espresso-2); color: var(--c-on-dark);
    text-decoration: none; box-shadow: var(--sh-1);
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.home-page .hm-promo__tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.home-page .hm-promo__tile:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-promo__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-page .hm-promo__copy {
    position: absolute; inset: auto 0 0 0; padding: 48px 18px 16px; display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(to top, rgba(15, 26, 44, 0.88), rgba(15, 26, 44, 0));
}
.home-page .hm-promo__copy em { font-style: normal; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.02em; color: var(--c-gold-light); }
.home-page .hm-promo__copy strong { font-size: var(--t-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }

/* Popular destinations: four across, each with three doors. */
.home-page .hm-dest__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-page .hm-dest__card { border-radius: var(--r-md); overflow: hidden; background: var(--c-bg); box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.home-page .hm-dest__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.home-page .hm-dest__body { padding: 12px 14px 14px; }
.home-page .hm-dest__name { margin: 0 0 8px; font-size: var(--t-body); font-weight: 600; }
.home-page .hm-dest__links { display: flex; flex-wrap: wrap; gap: 6px; }
.home-page .hm-dest__links a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
    border-radius: var(--r-pill); background: var(--c-bg-alt); color: var(--c-ink);
    font-size: var(--t-micro); font-weight: 600; text-decoration: none; transition: background 200ms var(--ease);
}
.home-page .hm-dest__links a:hover { background: var(--c-bg-alt-2); }
.home-page .hm-dest__links a:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-dest__links .et-i { width: 14px; height: 14px; color: var(--c-bronze); }

/* Popular routes and partners. */
.home-page .hm-routes__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.home-page .hm-routes__h { margin: 0 0 8px; font-size: var(--t-body); font-weight: 600; color: var(--c-muted); }
.home-page .hm-routes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.home-page .hm-routes__list a {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px;
    border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-ink); text-decoration: none;
    transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.home-page .hm-routes__list a:hover { background: var(--c-bg-alt); border-color: var(--c-line-2); }
.home-page .hm-routes__list a:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-routes__list .et-i { width: 16px; height: 16px; color: var(--c-bronze); flex: none; }
.home-page .hm-routes__list a > span { flex: 1 1 auto; font-size: var(--t-small); font-weight: 600; min-width: 0; }
.home-page .hm-routes__arrow { color: var(--c-muted); font-weight: 500; }
.home-page .hm-routes__list small { font-size: var(--t-micro); color: var(--c-muted); white-space: nowrap; }
.home-page .hm-partners { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.home-page .hm-partners__h { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--c-muted); }
.home-page .hm-partners__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.home-page .hm-partners__list li { font-size: var(--t-small); color: var(--c-muted); }
.home-page .hm-partners__list b { color: var(--c-ink); font-weight: 600; margin-left: 4px; }

@media (max-width: 1068px) {
    .home-page .hm-dest__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 834px) {
    .home-page .hm-manage__grid { grid-template-columns: 1fr; }
    .home-page .hm-dest__grid { grid-template-columns: repeat(2, 1fr); }
    .home-page .hm-routes__cols { grid-template-columns: 1fr; }
    .home-page .hm-promo__tile { flex-basis: 280px; }
}
@media (max-width: 734px) {
    .home-page .home-hero--wide { padding: 28px 0 24px; }
    .home-page .hm-hero__card { margin-top: 18px; }
    .home-page .hm-dest__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .home-page .hm-dest__body { padding: 10px; }
    .home-page .hm-routes__list { grid-template-columns: 1fr; }
    .home-page .hm-promo__tile { flex-basis: 84vw; }
}
@media (max-width: 480px) {
    .home-page .hm-dest__grid { grid-template-columns: 1fr; }
}

/* TRIP.COM PALETTE (2026-10-20): the hero is a light band now, so the promise
   line under the search card and the trust marks read in navy and blue. */
.home-page .hm-trust, .home-page .hm-trust li { color: var(--c-muted); text-shadow: none; }
.home-page .hm-trust li b { color: var(--c-ink); }
.home-page .hm-trust li + li::before { color: var(--c-primary); }
.home-page .trust-ico { color: var(--c-primary); }
.home-page .hm-promo__copy em { color: var(--c-gold-light); }
.home-page .fc-price, .home-page .hm-day__price { color: var(--c-accent); }

/* ====================================================================
   THE TRIP.COM ARRANGEMENT (2026-10-20). Deal cards with a tag chip and
   paddles, the Elite picks tabs with a sliding ink, photo destination
   tiles, the flights list, the app banner. Tokens only.
   ==================================================================== */
/* Offers: white deal cards, photo on top, a blue tag on the photo. */
.home-page .hm-promo__track { gap: 14px; padding-bottom: 12px; }
.home-page .hm-deal {
    flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column;
    border-radius: var(--r-md); overflow: hidden; background: var(--c-bg); color: var(--c-ink);
    box-shadow: var(--sh-1); text-decoration: none;
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.home-page .hm-deal:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.home-page .hm-deal:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-deal__shot { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--c-bg-alt-2); }
.home-page .hm-deal__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-page .hm-deal__tag {
    position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--c-primary); color: #fff; font-style: normal; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.01em;
}
.home-page .hm-deal__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.home-page .hm-deal__body strong { font-size: var(--t-body); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.home-page .hm-deal__body small { font-size: var(--t-small); color: var(--c-muted); line-height: 1.4; }
.home-page .hm-promo .ap-rail__paddles { margin-top: -2px; }

/* Elite picks: the tab strip with its sliding ink, then one panel. */

.home-page .hm-tabs { position: relative; display: flex; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; }
.home-page .hm-tabs::-webkit-scrollbar { display: none; }
.home-page .hm-tabs__tab {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
    border: 0; background: none; color: var(--c-muted); font: 600 var(--t-body)/1 var(--f-sans); letter-spacing: -0.01em;
    cursor: pointer; white-space: nowrap; transition: color 200ms var(--ease);
}
.home-page .hm-tabs__tab .et-i { width: 18px; height: 18px; }
.home-page .hm-tabs__tab:hover { color: var(--c-ink); }
.home-page .hm-tabs__tab[aria-selected="true"] { color: var(--c-primary); }
.home-page .hm-tabs__tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.home-page .hm-tabs__ink {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; border-radius: 2px; background: var(--c-primary);
    transition: transform 250ms var(--ease);
}

.home-page .hm-pick, .home-page .hm-trip, .home-page .hm-insp__card {
    display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg); color: var(--c-ink);
    border: 1px solid var(--c-line); text-decoration: none;
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.home-page .hm-pick:hover, .home-page .hm-trip:hover, .home-page .hm-insp__card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.home-page .hm-pick:focus-visible, .home-page .hm-trip:focus-visible, .home-page .hm-insp__card:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-pick__shot, .home-page .hm-trip__shot { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--c-primary-soft); }
.home-page .hm-pick__shot img, .home-page .hm-trip__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.home-page .hm-pick__body, .home-page .hm-trip__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.home-page .hm-pick__body strong, .home-page .hm-trip__body strong { font-size: var(--t-body); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.home-page .hm-pick__body small, .home-page .hm-trip__body small {
    font-size: var(--t-small); color: var(--c-muted); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.home-page .hm-trips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-page .hm-insp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-page .hm-insp__card { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
.home-page .hm-insp__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); }
.home-page .hm-insp__ico .et-i { width: 22px; height: 22px; }
.home-page .hm-insp__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-page .hm-insp__body strong { font-size: var(--t-body); font-weight: 600; }
.home-page .hm-insp__body small { font-size: var(--t-small); color: var(--c-muted); line-height: 1.4; }

/* Destinations: the photograph fills the tile, the name sits on a navy fade. */
.home-page .hm-dest__card { border: 0; box-shadow: none; background: none; overflow: visible; }
.home-page .hm-dest__shot {
    position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg-alt-2);
    box-shadow: var(--sh-1); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.home-page .hm-dest__card:hover .hm-dest__shot { transform: translateY(-4px); box-shadow: var(--sh-3); }
.home-page .hm-dest__shot:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-dest__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-page .hm-dest__name {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 36px 14px 12px;
    color: #fff; font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.01em;
    background: linear-gradient(to top, rgba(15, 26, 44, 0.82), rgba(15, 26, 44, 0));
}
.home-page .hm-dest__links { margin-top: 10px; }
.home-page .hm-dest__links a { background: var(--c-primary-soft); color: var(--c-link); }
.home-page .hm-dest__links a:hover { background: var(--c-bg-alt-2); }
.home-page .hm-dest__links .et-i { color: var(--c-primary); }

/* Popular flights: Trip's route list, the plane in a blue circle. */
.home-page .hm-routes__list a { border-color: var(--c-line); }
.home-page .hm-routes__list a:hover { background: var(--c-primary-soft); border-color: transparent; }
.home-page .hm-routes__list .et-i { display: block; width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); }
.home-page .hm-routes__list small { color: var(--c-link); font-weight: 600; }

/* Why book with us: the trust marks in blue on light blue. */
.home-page .trust-ico { background: var(--c-primary-soft); color: var(--c-primary); border-radius: 50%; }

/* The app banner. */
.home-page .hm-app { padding-block: 8px 28px; }
.home-page .hm-app__card {
    display: flex; align-items: center; gap: 18px; padding: 22px 24px;
    border-radius: var(--r-lg); background: linear-gradient(135deg, var(--c-primary-soft) 0%, #ffffff 70%); border: 1px solid var(--c-line);
}
.home-page .hm-app__ico { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--c-primary); color: #fff; }
.home-page .hm-app__ico .et-i { width: 28px; height: 28px; }
.home-page .hm-app__copy { flex: 1 1 auto; min-width: 0; }
.home-page .hm-app__copy h2 { margin: 0 0 4px; font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.02em; }
.home-page .hm-app__copy p { margin: 0; color: var(--c-muted); font-size: var(--t-body); }
.home-page .hm-app__btn { flex: none; }

@media (max-width: 1068px) {
    .home-page .hm-picks__grid, .home-page .hm-insp { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 834px) {
    .home-page .hm-picks__grid, .home-page .hm-insp { grid-template-columns: repeat(2, 1fr); }
    .home-page .hm-trips { grid-template-columns: 1fr; }
    .home-page .hm-deal { flex-basis: 260px; }
    .home-page .hm-app__card { flex-wrap: wrap; }
    .home-page .hm-app__btn { flex: 1 1 100%; }
}
@media (max-width: 734px) {
    .home-page .hm-deal { flex-basis: 78vw; }
    
    .home-page .hm-insp { grid-template-columns: 1fr; }
    .home-page .hm-tabs__tab { padding: 0 12px; font-size: var(--t-small); }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hm-deal, .home-page .hm-pick, .home-page .hm-trip, .home-page .hm-insp__card, .home-page .hm-dest__shot, .home-page .hm-tabs__ink { transition: none; }
    .home-page .hm-deal:hover, .home-page .hm-pick:hover, .home-page .hm-trip:hover, .home-page .hm-insp__card:hover, .home-page .hm-dest__card:hover .hm-dest__shot { transform: none; }
}

/* ====================================================================
   THE FRONT PAGE, 2026-10-20: a product grid you can tap at once.
   A Trip-blue band carries the lockup and a short title; a white sheet
   rises into it with the eight products as round icon tiles, then the
   search card, then a row of round shortcuts. The owner's photographs
   wash softly through the band. Nothing below this block changed.
   ==================================================================== */

/* The band: the lockup line, a short title, one line. */

/* The sheet rises into the band. */
.home-page .hm-sheet {
    position: relative; z-index: 3; margin: -72px auto 0; max-width: 1180px;
    background: var(--c-bg); border-radius: var(--r-xl); box-shadow: var(--sh-3);
    padding: 18px 18px 14px;
}
.home-page .hm-sheet .tsc { box-shadow: none; border: 1px solid var(--c-line); }

/* The product grid: eight round tiles, the four big ones first. */
.home-page .hm-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 0 0 14px; list-style: none; padding: 0; }
.home-page .hm-grid__tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 8px 4px 6px; min-height: 44px; border-radius: var(--r-md); color: var(--c-ink); text-decoration: none;
    opacity: 0; transform: translateY(10px);
    animation: hm-pop 520ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 55ms);
    transition: transform 220ms var(--ease), background 220ms var(--ease);
}
@keyframes hm-pop { to { opacity: 1; transform: none; } }
.home-page .hm-grid__tile:hover { background: var(--c-bg-alt); transform: translateY(-2px); }
.home-page .hm-grid__tile:active { transform: translateY(1px); }
.home-page .hm-grid__tile:focus-visible { outline: none; box-shadow: var(--ring); }
/* The door icon: one navy monoline glyph on the white sheet, no circle, no
   shadow, the same size on all eight tiles (2026-10-30). */
.home-page .hm-grid__ico {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: var(--tb, var(--c-primary-soft)); color: var(--ti, var(--c-ink)); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.home-page .hm-grid__ico .et-i { width: 24px; height: 24px; }
.home-page .hm-grid__tile:hover .hm-grid__ico { transform: translateY(-1px); box-shadow: 0 6px 14px -8px var(--ti, var(--c-ink)); }
.home-page .hm-grid__tile[aria-current="true"] .hm-grid__ico { box-shadow: inset 0 0 0 1.5px var(--ti, var(--c-primary)); }
/* Door colours (design 1, 2026-10-30): eight tints at one lightness and one
   saturation, each with its own deep ink. The same map lives in
   pages/hub.css for the product tabs; change both together. */
.home-page [data-door="hosts"] { --tb: #e4f4f1; --ti: #0f766e; }
.home-page [data-door="hotels"] { --tb: #e6eefc; --ti: #1d4ed8; }
.home-page [data-door="flights"] { --tb: #e3f1fa; --ti: #0369a1; }
.home-page [data-door="activities"] { --tb: #fbf0e0; --ti: #b45309; }
.home-page [data-door="transport"] { --tb: #e6f4e8; --ti: #15803d; }
.home-page [data-door="car"] { --tb: #eaedf2; --ti: #334155; }
.home-page [data-door="visa"] { --tb: #ece8f8; --ti: #6d28d9; }
.home-page [data-door="fasttrack"] { --tb: #fbefd3; --ti: #a16207; }
.home-page .hm-grid__name { font-size: var(--t-small); font-weight: 600; text-align: center; line-height: 1.2; letter-spacing: -0.01em; }

/* The shortcut row: round doors to the things only Elite Trip has. */

/* The promise line sits under the sheet, on white now. */

@media (max-width: 1068px) {
    .home-page .hm-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 734px) {
                    .home-page .hm-sheet { margin: -48px 12px 0; padding: 14px 10px 10px; border-radius: var(--r-lg); }
    .home-page .hm-grid { grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 10px; }
    .home-page .hm-grid__ico { width: 48px; height: 48px; }
    .home-page .hm-grid__ico .et-i { width: 22px; height: 22px; }
        }
@media (prefers-reduced-motion: reduce) {
        .home-page .hm-grid__tile { animation: none; opacity: 1; transform: none; }
}

/* The floating "Ask our team" door, a gradient pill that breathes. */
body.page-home .al-fab { background: linear-gradient(135deg, #0f1a2c, #1e2d48); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35); animation: hm-breathe 3.6s ease-in-out infinite; }
body.page-home .al-fab .et-i { color: #fff; }
body.page-home .al-fab:hover { background: linear-gradient(135deg, #1d4ed8, #0f1a2c); box-shadow: 0 14px 34px rgba(37, 99, 235, 0.45); }
@keyframes hm-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { body.page-home .al-fab { animation: none; } }
/* The promise line under the sheet sits on the blue band: white, not grey. */

/* ====================================================================
   THE APPLE PASS, 2026-10-20: nothing moves, nothing is removed. One
   measure down the middle, one type scale, an even beat between the
   chapters, white and grey turn by turn, quieter edges.
   ==================================================================== */
.home-page .hm-manage, .home-page .hm-promo, .home-page .market, .home-page .hm-picks, .home-page .day,
.home-page .svc, .home-page .hm-dest, .home-page .trust-section, .home-page .hm-routes, .home-page .hm-app,
.home-page .cta-section { padding-block: clamp(44px, 6vw, 84px); }
.home-page .hm-manage { padding-block: clamp(32px, 4vw, 52px) 0; }

.home-page .hm-promo.ap-chapter, .home-page .hm-picks, .home-page .svc.ap-chapter,
.home-page .trust-section.ap-chapter--sand, .home-page .hm-app { background: var(--c-bg-alt); }
.home-page .hm-manage, .home-page .market.ap-chapter, .home-page .day.ap-chapter--sand,
.home-page .hm-dest.ap-chapter--sand, .home-page .hm-routes.ap-chapter, .home-page .cta-section.ap-chapter--sand,
.home-page .stats-bar { background: var(--c-bg); }

.home-page .hm-row-head { margin-bottom: clamp(16px, 2vw, 24px); }
.home-page .hm-row-head h2, .home-page .hm-manage__h { font-size: var(--t-section); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.home-page .hm-manage__h { font-size: var(--t-title); margin-bottom: 16px; }
.home-page .hm-row-head .ap-link { font-size: var(--t-body); }
.home-page .hm-day__lead, .home-page .hero-subtitle { font-size: var(--t-lead); }

.home-page .hm-grid__name, .home-page .hm-manage__copy strong { font-size: var(--t-body); }
.home-page .hm-manage__copy small, .home-page .hm-dest__links a, .home-page .hm-partners__list li,
.home-page .hm-routes__list a > span, .home-page .tsc__note { font-size: var(--t-small); }

.home-page .hm-manage__card, .home-page .hm-deal, .home-page .hm-dest__card, .home-page .hm-routes__list a,
.home-page [class*="hm-pick"], .home-page [class*="hm-trip"], .home-page [class*="hm-insp"] { border-radius: var(--r-md); }
.home-page .hm-manage__card, .home-page .hm-routes__list a { border-color: var(--c-line); }
.home-page .hm-sheet { border-radius: var(--r-xl); }

@media (max-width: 734px) {
    .home-page .hm-row-head h2 { font-size: var(--t-title); }
    .home-page .hm-manage, .home-page .hm-promo, .home-page .market, .home-page .hm-picks, .home-page .day,
    .home-page .svc, .home-page .hm-dest, .home-page .trust-section, .home-page .hm-routes, .home-page .hm-app,
    .home-page .cta-section { padding-block: 40px; }
    .home-page .hm-manage { padding-block: 28px 0; }
}

/* WORDS IN THE MIDDLE (owner, 2026-10-20): every chapter opens the way
   apple.com's do, the headline and its line centred, the "see all" link
   under them. Cards, rails and grids stay exactly where they are. */
.home-page .hm-row-head { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 6px; }
.home-page .hm-row-head h2 { max-width: 820px; }
.home-page .hm-row-head .et-horizon::after { margin-left: auto; margin-right: auto; }
.home-page .hm-row-head .ap-link { order: 2; }
.home-page .hm-day__lead, .home-page .hm-manage__h { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.home-page .hm-picks__tabs, .home-page .picks-tabs { justify-content: center; }
.home-page .hm-partners { justify-content: center; text-align: center; }
.home-page .hm-routes__h { text-align: center; }
.home-page .cta-content { text-align: center; }
.home-page #picksTabs { justify-content: center; }

/* ====================================================================
   THE et. FRONT PAGE, 2026-10-20: a navy panel beside a full-colour
   photograph, the white sheet with the eight products and the search
   card rising into both. Colour beside the photograph, never over it.
   Then two lines, never one sideways row, for every list of cards.
   ==================================================================== */
.home-page .hm-hero { position: relative; background: var(--c-bg); padding: 12px 0 8px; }
.home-page .hm-hero__split { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 470px; border-radius: var(--r-xl); overflow: hidden; background: var(--c-espresso); }
.home-page .hm-hero__panel { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 52px) 112px; color: var(--c-on-dark); }
.home-page .hm-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--c-gold-light); }
.home-page .hm-hero__eyebrow img { width: 38px; height: 27px; }
.home-page .hm-hero__panel h1 { max-width: 560px; color: #fff; font-size: var(--t-hero); line-height: 1.08; letter-spacing: -0.02em; }
.home-page .hm-hero__panel h1 .hm-h1-a, .home-page .hm-hero__panel h1 .hm-h1-b { display: inline; }
.home-page .hm-hero__panel h1 .hm-h1-b { color: var(--c-gold-light); } /* light blue on navy: 12:1, brand blue was 2.9:1 */
.home-page .hm-hero__panel .hero-subtitle { max-width: 520px; margin: 0; font-size: var(--t-lead); color: var(--c-on-dark-2); }
.home-page .hm-hero__panel .hm-trust { margin-top: 4px; font-size: var(--t-small); color: var(--c-on-dark-2); text-shadow: none; }
.home-page .hm-hero__panel .hm-trust li b { color: #fff; }
.home-page .hm-hero__panel .hm-trust li + li::before { background: var(--c-brand-gold); }
.home-page .hm-hero__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 18%; z-index: 2; background: linear-gradient(90deg, var(--c-espresso), rgba(15, 26, 44, 0)); pointer-events: none; }
.home-page .hm-hero__caption { position: absolute; left: 20px; bottom: 124px; z-index: 3; padding: 8px 12px; border-radius: var(--r-pill); background: rgba(15, 26, 44, 0.74); color: var(--c-on-dark); font-size: var(--t-micro); font-weight: 600; }
.home-page .hm-sheet { margin-top: -84px; }
.home-page .hm-grid__ico { background: var(--tb, var(--c-primary-soft)); color: var(--ti, var(--c-ink)); }

.home-page .featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 14px; padding-bottom: 0; overflow: visible; scroll-snap-type: none; }
.home-page .hm-dest__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.home-page .hm-routes__list { grid-template-columns: 1fr 1fr; }

.home-page .cta-manage { margin: 14px 0 0; font-size: var(--t-small); color: var(--c-muted); }
.home-page .cta-manage a { font-weight: 600; color: var(--c-link); }
.home-page .cta-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 0; font-size: var(--t-small); color: var(--c-muted); }
.home-page .cta-app .et-i { width: 18px; height: 18px; color: var(--c-brand-gold-deep); }

@media (max-width: 900px) {
    .home-page .hm-hero__split { grid-template-columns: 1fr; grid-template-rows: auto 56vw; min-height: 0; }
    .home-page .hm-hero__panel { padding: 22px 18px 24px; gap: 10px; }
    .home-page .hm-hero__panel h1 { font-size: 1.5rem; }
    .home-page .hm-hero__panel .hero-subtitle { font-size: var(--t-small); }
    .home-page .hm-hero__media { min-height: 0; }
    .home-page .hm-hero__media::before { inset: 0 0 auto 0; width: auto; height: 26%; background: linear-gradient(180deg, var(--c-espresso), rgba(15, 26, 44, 0)); }
    .home-page .hm-hero__caption { bottom: 76px; left: 14px; }
    .home-page .hm-sheet { margin: -64px 12px 0; }
    .home-page .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-page .hm-dest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
    .home-page .hm-hero { padding: 8px 0 0; }
    .home-page .hm-hero__split { border-radius: var(--r-lg); }
    .home-page .hm-hero__panel .hm-trust { font-size: var(--t-micro); }
    
    
}

/* On the front page the eight tiles ARE the tabs, so the card drops its
   own strip and its promises (the panel above already carries them). */
.home-page .hm-sheet .tsc__tabs { display: none; }
.home-page .hm-sheet .tsc { border: 0; }
.home-page .hm-sheet .tsc__panel { padding: 6px 4px 0; }
.home-page .hm-sheet .tsc__checks { display: none; }
.home-page .hm-sheet .tsc__ideas-h { margin-top: 2px; }

/* THE ORDER THE OWNER ASKED FOR (2026-10-20, evening): the eight tiles
   first and a little smaller, then the words and the mark, then the
   photograph, then the search card rising into it. No promises line. */
.home-page .hm-hero { padding: 8px 0 8px; }
.home-page .hm-sheet--top { margin: 0 0 12px; padding: 10px 12px 2px; box-shadow: var(--sh-1); border: 1px solid var(--c-line); }
.home-page .hm-sheet--top .hm-grid { margin-bottom: 4px; }
.home-page .hm-grid__ico { width: 52px; height: 52px; }
.home-page .hm-grid__ico .et-i { width: 24px; height: 24px; }
.home-page .hm-grid__name { font-size: 13px; }
.home-page .hm-hero__panel { padding-bottom: 104px; gap: 12px; }
@media (max-width: 900px) {
    .home-page .hm-hero__panel { padding: 20px 18px 22px; gap: 8px; }
}
@media (max-width: 734px) {
    .home-page .hm-sheet--top { margin: 0 0 10px; padding: 8px 6px 0; border-radius: var(--r-lg); }
    .home-page .hm-grid { gap: 0; margin-bottom: 4px; }
    .home-page .hm-grid__tile { gap: 6px; padding: 8px 2px 6px; }
    .home-page .hm-grid__ico { width: 48px; height: 48px; }
    .home-page .hm-grid__ico .et-i { width: 22px; height: 22px; }
    .home-page .hm-grid__name { font-size: 12px; }
}

/* THE SLIM BANNER (2026-10-20, owner): the words and the photograph take
   one short strip between the tiles and the search card, no more. */
.home-page .hm-hero__split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; height: 172px; border-radius: var(--r-lg); margin-bottom: 12px; }
.home-page .hm-hero__panel { justify-content: center; gap: 6px; padding: 14px 24px; }
.home-page .hm-hero__eyebrow { font-size: var(--t-micro); gap: 8px; }
.home-page .hm-hero__eyebrow img { width: 30px; height: 21px; }
.home-page .hm-hero__panel h1 { max-width: none; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; }
.home-page .hm-hero__panel .hero-subtitle { max-width: 560px; font-size: var(--t-small); line-height: 1.4; }
.home-page .hm-hero__media { min-height: 0; }
.home-page .hm-hero__media::before { width: 24%; }
.home-page .hm-hero__caption { display: none; }
.home-page .hm-sheet { margin: 0 auto; }
.home-page .hm-sheet--top { margin: 0 0 12px; }
@media (max-width: 900px) {
    .home-page .hm-hero__split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: none; height: 118px; margin-bottom: 10px; }
    .home-page .hm-hero__panel { padding: 10px 14px; gap: 4px; }
    .home-page .hm-hero__eyebrow img { width: 26px; height: 18px; }
    .home-page .hm-hero__panel h1 { font-size: 1.05rem; line-height: 1.2; }
    .home-page .hm-hero__panel .hero-subtitle { display: none; }
    .home-page .hm-hero__media::before { inset: 0 auto 0 0; width: 30%; height: auto; background: linear-gradient(90deg, var(--c-espresso), rgba(15, 26, 44, 0)); }
    .home-page .hm-sheet { margin: 0; }
}
@media (max-width: 734px) {
    .home-page .hm-sheet { margin: 0; padding: 12px 10px 10px; }
    .home-page .hm-sheet--top { margin: 0 0 10px; }
}

/* On a phone the banner shows the mark alone above the headline. */
@media (max-width: 734px) {
    .home-page .hm-hero__eyebrow span { display: none; }
    .home-page .hm-hero__panel { gap: 6px; }
}

/* Owner, 2026-10-20: two rows of four on every screen, all eight tiles the same size. */
.home-page .hm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; max-width: 920px; margin-inline: auto; }
/* Each door is its own coloured circle plus the word, with air around it:
   no card, no border (design 1, 2026-10-30). */
.home-page .hm-grid__tile { gap: 7px; padding: 10px 4px 8px; }
.home-page .hm-grid__ico { width: 52px; height: 52px; }
.home-page .hm-grid__ico .et-i { width: 24px; height: 24px; }
.home-page .hm-grid__name { font-size: 14px; }
.home-page .hm-sheet--top { padding: 14px 16px 6px; }
@media (max-width: 734px) {
    .home-page .hm-grid { gap: 4px 0; }
    .home-page .hm-grid__ico { width: 48px; height: 48px; }
    .home-page .hm-grid__ico .et-i { width: 22px; height: 22px; }
    .home-page .hm-grid__name { font-size: 12px; }
    .home-page .hm-sheet--top { padding: 8px 6px 0; }
}

/* ====================================================================
   THE HOST TILE (2026-10-20, owner): small round tiles, three across on
   a phone and six across on a wide screen, never one long row per host
   going down the page. A round portrait on top, the name and its ID
   mark, the languages, the host's own From price. The whole tile is one
   link to the profile.
   ==================================================================== */
.home-page .featured-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.home-page .featured-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    min-height: 0; padding: 14px 10px 12px; border-radius: var(--r-lg); background: #fff;
    border: 1px solid var(--c-line); box-shadow: 0 1px 2px rgba(15, 26, 44, 0.04);
    transition: box-shadow 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease);
}
.home-page .featured-card:hover { border-color: var(--c-brand-gold); box-shadow: 0 10px 26px rgba(15, 26, 44, 0.1); transform: translateY(-2px); }
.home-page .featured-card:focus-within { box-shadow: var(--ring); border-color: var(--c-brand-gold); }
.home-page .featured-card-photo { flex: none; width: 64px; height: 64px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c-bg-alt); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-line); }
.home-page .featured-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.home-page .fc-nophoto { display: grid; place-items: center; width: 100%; height: 100%; font: 700 1.25rem/1 var(--f-sans); color: var(--c-brand-gold-deep); background: var(--c-bg-alt-2); }
.home-page .featured-card-body { flex: none; width: 100%; padding: 0; gap: 3px; min-width: 0; align-items: center; }
.home-page .fc-name { justify-content: center; max-width: 100%; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.home-page .fc-check { color: var(--c-brand-gold-deep); }
.home-page .fc-check .et-i { width: 15px; height: 15px; }
.home-page .fc-langs { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; min-height: 0; font-size: var(--t-small); color: var(--c-muted); }
.home-page .fc-langs .et-i { width: 14px; height: 14px; color: var(--c-brand-gold-deep); flex: none; }
.home-page .fc-langs > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-page .fc-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 10px; margin: 1px 0 0; font-size: 12px; color: var(--c-muted); }
.home-page .fc-facts:empty { display: none; }
/* A tile keeps only the facts that change a choice: the rating and free today. */
.home-page .fc-fact:not(.fc-fact--star):not(.fc-fact--free) { display: none; }
.home-page .fc-fact { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.home-page .fc-fact .et-i { width: 13px; height: 13px; color: var(--c-brand-gold-deep); }
.home-page .fc-fact--star { color: var(--c-ink); font-weight: 700; }
.home-page .fc-fact--star small { font-weight: 500; color: var(--c-muted); }
.home-page .fc-fact--free { color: var(--c-success); font-weight: 600; }
.home-page .fc-fact--free .et-i { color: var(--c-success); }
.home-page .fc-side { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; text-align: center; }
.home-page .fc-price { margin: 0; padding: 0; border: 0; font-size: 12px; line-height: 1.25; color: var(--c-muted); white-space: normal; }
.home-page .fc-price b { display: inline; font-size: 0.9375rem; font-weight: 700; color: var(--c-accent); letter-spacing: -0.01em; }
.home-page .fc-price small { font-size: 12px; color: var(--c-muted); }
.home-page .fc-go { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-ink); color: #fff; transition: background 240ms var(--ease), transform 240ms var(--ease); }
.home-page .fc-go .et-i { width: 14px; height: 14px; }
.home-page .featured-card:hover .fc-go { background: var(--c-brand-gold); color: #fff; transform: translateX(2px); }
.home-page .featured-card.is-skeleton .fc-side { min-width: 72px; }
.home-page .featured-card.is-skeleton .featured-card-photo { box-shadow: none; }
@media (max-width: 900px) {
    .home-page .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .home-page .featured-card { padding: 10px 6px 10px; gap: 5px; }
    .home-page .featured-card-photo { width: 54px; height: 54px; }
    .home-page .featured-card:nth-child(n+7) { display: none; }
    .home-page .fc-facts { gap: 2px 8px; }
}

/* ====================================================================
   THE HOST DECK (2026-10-20, owner): one row of tiles a page, three on
   a phone and six on a wide screen, turning on a slow clock that stops
   under a hand. The tiles rise in one after another on every turn. The
   dots stay small round dots, no pill, no progress line. Reduced
   motion: no turn.
   ==================================================================== */
.home-page .featured-grid.is-deck .featured-card[hidden] { display: none; }
.home-page .featured-grid.is-turn .featured-card { animation: hm-deal 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes hm-deal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.home-page .featured-card { padding: 14px 10px 12px; gap: 6px; }
.home-page .featured-card-photo { width: 64px; height: 64px; }
.home-page .fc-nophoto { font-size: 1.0625rem; }
.home-page .fc-name { font-size: 0.9375rem; }
.home-page .fc-langs { font-size: 0.8125rem; }
.home-page .fc-facts { font-size: 12px; margin-top: 0; }
.home-page .fc-price b { font-size: 0.9375rem; }
.home-page .fc-go { width: 24px; height: 24px; }
.home-page .hm-deck__nav {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 14px auto 0; padding: 0; max-width: 320px;
}
.home-page .hm-deck__arrow {
    display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 50%;
    background: #fff; color: var(--c-ink); cursor: pointer;
    transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.home-page .hm-deck__arrow .et-i { width: 14px; height: 14px; }
.home-page .hm-deck__arrow:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.home-page .hm-deck__arrow:active { transform: translateY(1px); }
.home-page .hm-deck__arrow:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-deck__dots { display: flex; align-items: center; gap: 8px; }
.home-page .hm-deck__dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--c-line-2); cursor: pointer;
    transition: background 240ms var(--ease);
}
.home-page .hm-deck__dot[aria-current="true"] { width: 10px; height: 10px; background: var(--c-ink); }
.home-page .hm-deck__dot:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 900px) {
    .home-page .featured-grid { gap: 8px; }
    .home-page .featured-card:nth-child(n+7) { display: flex; }
    .home-page .featured-grid.is-deck .featured-card[hidden] { display: none; }
    .home-page .fc-facts { display: none; }
    .home-page .fc-go { display: none; }
    .home-page .featured-card { padding: 10px 6px 10px; gap: 5px; }
    .home-page .featured-card-photo { width: 54px; height: 54px; }
    .home-page .fc-name { font-size: 0.875rem; }
    .home-page .fc-langs { font-size: 0.75rem; }
    .home-page .fc-price { font-size: 12px; }
    .home-page .fc-price b { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .featured-grid.is-turn .featured-card { animation: none; }
}

/* More space between the header logo and the product tiles (2026-10-21). */
.home-page .hm-hero { padding-top: 56px; }
@media (max-width: 640px) {
    .home-page .hm-hero { padding-top: 40px; }
}

/* ====================================================================
   COLOUR RHYTHM (2026-10-21)
   The same three colours, rebalanced: white is the ground, cream comes
   once as a soft chapter, navy carries weight as one full band (safety)
   and one card (the close), gold is the small spark on underlines, rings
   and the one closing button. Light, soft, dark, light as you scroll.
   ==================================================================== */

/* Gold underline under every section title. */
.home-page .et-horizon::after { background: linear-gradient(90deg, transparent, var(--c-brand-gold) 20% 80%, transparent); }

/* Safety: the navy band. */
.home-page .trust-section.ap-chapter--sand {
    background: radial-gradient(120% 140% at 0% 0%, var(--c-espresso-3) 0%, var(--c-espresso) 55%, #0a1220 100%);
    color: var(--c-on-dark);
}
.home-page .trust-section .hm-rings { stroke: var(--c-brand-gold); }
.home-page .trust-section .hm-rings circle:first-child { stroke-opacity: 0.28; }
.home-page .trust-section .hm-rings circle:nth-child(2) { stroke-opacity: 0.4; }
.home-page .trust-section .hm-rings .hm-rings__dots { stroke: var(--c-brand-gold); stroke-opacity: 0.45; }
.home-page .trust-section .hm-row-head h2 { color: #fff; }
.home-page .trust-section .hm-row-head .ap-link { color: var(--c-gold-light); }
.home-page .trust-item {
    background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.home-page .trust-item:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.45); transform: translateY(-2px); }
.home-page .trust-ico { background: rgba(37, 99, 235, 0.12); color: var(--c-brand-gold); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.55); }
.home-page .trust-item h3 { color: #fff; }
.home-page .trust-item p { color: var(--c-on-dark-2); }

/* The close: a navy card on white, with the one gold button. */
.home-page .cta-banner {
    background: radial-gradient(110% 160% at 100% 0%, var(--c-espresso-3) 0%, var(--c-espresso) 60%);
    box-shadow: var(--sh-3); color: var(--c-on-dark);
}
.home-page .cta-banner .hm-rings { stroke: var(--c-brand-gold); }
.home-page .cta-banner .hm-rings .hm-rings__dots { stroke: var(--c-brand-gold); }
.home-page .cta-banner .hm-rings .hm-rings__sun { fill: var(--c-brand-gold); }
.home-page .cta-content h2, .home-page .cta-talk__h { color: #fff; }
.home-page .cta-content p, .home-page .cta-talk__p, .home-page .cta-manage { color: var(--c-on-dark-2); }
.home-page .cta-manage a, .home-page .cta-actions .ap-link { color: var(--c-gold-light); }
.home-page .cta-btn.et-btn--primary { background: var(--c-brand-gold); border-color: var(--c-brand-gold); color: #fff; }
.home-page .cta-btn.et-btn--primary:hover { background: var(--c-gold-light); border-color: var(--c-gold-light); color: var(--c-ink); }
.home-page .cta-chat { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.home-page .cta-chat:hover { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 1px var(--c-brand-gold); }
.home-page .cta-chat--wa .et-i { color: #3ccf7a; }
.home-page .cta-chat--zalo .et-i { color: #6ea8ff; }
.home-page .cta-talk__num { color: var(--c-on-dark); }
.home-page .cta-talk__num .et-i { color: var(--c-brand-gold); }

@media (prefers-reduced-motion: reduce) {
    .home-page .trust-item:hover { transform: none; }
}

/* Concierge: the navy button read as navy on navy; it goes light. */
.home-page .hm-cg__actions .et-btn--primary { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-ink); }
.home-page .hm-cg__actions .et-btn--primary:hover { background: #fff; border-color: #fff; color: var(--c-ink); }

/* Popular flights on a phone: one route per row, so the city names stay on
   one line and nothing pushes past the screen edge. */
@media (max-width: 600px) {
    .home-page .hm-routes__cols { grid-template-columns: minmax(0, 1fr); }
    .home-page .hm-routes__list { grid-template-columns: minmax(0, 1fr); }
}


/* ====================================================================
   THE GLOBAL HOMEPAGE (2026-10-21): an international travel company
   that is local in Vietnam. Under the tiles: one "Where to?" field,
   your trip, what you were looking at, real deals, the world, popular
   flights with a From picker, stays by type, the one Local Host
   section, the Vietnam essentials, Concierge, six promises that are
   true in the code, help, guides. Navy carries weight, gold is the
   small spark, every list of cards is a grid of two lines or more.
   The Local Host story moved to /local-hosts (host_story.css).
   ==================================================================== */
.home-page section[hidden] { display: none; }
.home-page .hm-where, .home-page .hm-mytrip, .home-page .hm-recent { background: var(--c-bg); }
.home-page .hm-deals, .home-page .hm-world, .home-page .hm-stays, .home-page .hm-arrive,
.home-page .hm-concierge, .home-page .hm-guides { padding-block: clamp(36px, 5vw, 72px); }
.home-page .hm-deals.ap-chapter, .home-page .hm-stays.ap-chapter, .home-page .hm-concierge.ap-chapter { background: var(--c-bg-alt); }
.home-page .hm-world.ap-chapter, .home-page .hm-arrive.ap-chapter, .home-page .hm-guides.ap-chapter,
.home-page .hm-routes.ap-chapter, .home-page .market.ap-chapter { background: var(--c-bg); }
.home-page .hm-market__line { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--c-brand-gold-text); order: 1; }

/* Where to? One wide capsule: the question, the field, the navy button. */
.home-page .hm-where { padding: 4px 0 clamp(20px, 3vw, 32px); }
.home-page .hm-where__form {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 14px;
    max-width: 920px; margin: 0 auto; padding: 8px 8px 8px 22px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-1);
    transition: box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.home-page .hm-where__form:focus-within { border-color: var(--c-ink); box-shadow: var(--ring); }
.home-page .hm-where__h { margin: 0; font-size: var(--t-sub); font-weight: 700; letter-spacing: -0.01em; color: var(--c-ink); white-space: nowrap; }
.home-page .hm-where__field { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.home-page .hm-where__field .et-i { flex: none; width: 18px; height: 18px; color: var(--c-brand-gold-deep); }
.home-page .hm-where__field input {
    flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent;
    font: inherit; font-size: var(--t-body); color: var(--c-ink); outline: none;
}
.home-page .hm-where__field input::placeholder { color: var(--c-muted); }
.home-page .hm-where__go { min-height: 48px; padding-inline: 26px; }
.home-page .hm-where__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: var(--t-small); color: var(--c-muted); }
.home-page .hm-where__chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
    border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff;
    color: var(--c-ink); font-weight: 600; text-decoration: none;
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.home-page .hm-where__chip:hover { border-color: var(--c-ink); background: var(--c-bg-alt); color: var(--c-ink); text-decoration: none; }
.home-page .hm-where__chip:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-where__chip .et-i { width: 15px; height: 15px; color: var(--c-brand-gold-deep); }

/* Your trip: one navy card with the next step. */
.home-page .hm-mytrip { padding: 0 0 clamp(20px, 3vw, 32px); }
.home-page .hm-mytrip__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px;
    max-width: 920px; margin: 0 auto; padding: 18px 22px; border-radius: var(--r-lg);
    background: var(--c-espresso); color: var(--c-on-dark); box-shadow: var(--sh-2);
}
.home-page .hm-mytrip__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(37, 99, 235, 0.14); color: var(--c-brand-gold); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.5); }
.home-page .hm-mytrip__ico .et-i { width: 22px; height: 22px; }
.home-page .hm-mytrip__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-page .hm-mytrip__kicker { margin: 0; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gold-light); }
.home-page .hm-mytrip__title { margin: 0; font-size: var(--t-title); font-weight: 700; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.home-page .hm-mytrip__meta, .home-page .hm-mytrip__next { margin: 0; font-size: var(--t-small); color: var(--c-on-dark-2); }
.home-page .hm-mytrip__status { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; }
.home-page .hm-mytrip__status:empty { display: none; }
.home-page .hm-mytrip__next b { color: #fff; font-weight: 600; }
.home-page .hm-mytrip__next[hidden] { display: none; }
.home-page .hm-mytrip__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.home-page .hm-mytrip__actions .et-btn--primary { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-ink); }
.home-page .hm-mytrip__actions .et-btn--primary:hover { background: #fff; border-color: #fff; color: var(--c-ink); }
.home-page .hm-mytrip__actions .ap-link { font-size: var(--t-small); color: var(--c-gold-light); }

/* Continue where you left off: four small cards, two to a row on a phone. */
.home-page .hm-recent { padding: 0 0 clamp(24px, 3vw, 40px); }
.home-page .hm-recent .hm-row-head h2 { font-size: var(--t-title); }
.home-page .hm-recent__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-page .hm-recent__card {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px;
    border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; color: var(--c-ink); text-decoration: none;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.home-page .hm-recent__card:hover { border-color: var(--c-brand-gold); box-shadow: var(--sh-1); color: var(--c-ink); text-decoration: none; }
.home-page .hm-recent__card:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-recent__kind { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.04em; color: var(--c-brand-gold-text); }
.home-page .hm-recent__card--order .hm-recent__kind { color: var(--c-success); }
.home-page .hm-recent__title { font-size: var(--t-small); font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Deals this week: three across, two lines; the price is the real one. */
.home-page .hm-deals__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-page .hm-deal {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-width: 0; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: #fff; color: var(--c-ink); text-decoration: none;
    transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.home-page .hm-deal:hover { border-color: var(--c-brand-gold); box-shadow: var(--sh-2); color: var(--c-ink); text-decoration: none; }
.home-page .hm-deal:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-deal__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-bg-alt); color: var(--c-ink); }
.home-page .hm-deal__ico .et-i { width: 20px; height: 20px; }
.home-page .hm-deal__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-page .hm-deal__title { font-size: var(--t-body); font-weight: 600; line-height: 1.3; }
.home-page .hm-deal__price { font-size: var(--t-small); color: var(--c-muted); }
.home-page .hm-deal__price b { font-size: var(--t-sub); font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; }
.home-page .hm-deal__go { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-ink); color: #fff; }
.home-page .hm-deal__go .et-i { width: 13px; height: 13px; }
.home-page .hm-deals__note { margin: 14px 0 0; text-align: center; font-size: var(--t-small); color: var(--c-muted); }

/* Trending destinations: typographic cards, six across in two lines. */
.home-page .hm-world__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.home-page .hm-world__card {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0;
    padding: 16px 14px 12px; border-radius: var(--r-lg); background: var(--c-espresso); color: var(--c-on-dark);
}
.home-page .hm-world__card--vietnam { background: var(--c-bg-alt); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); }
.home-page .hm-rings--world { width: 170px; height: auto; right: -64px; top: -64px; }
.home-page .hm-rings--world circle:first-child { stroke-opacity: 0.22; }
.home-page .hm-rings--world circle:nth-child(2) { stroke-opacity: 0.32; }
.home-page .hm-world__card .hm-rings { stroke: var(--c-brand-gold); }
.home-page .hm-world__head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-page .hm-world__code { font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; color: var(--c-gold-light); }
.home-page .hm-world__card--vietnam .hm-world__code { color: var(--c-brand-gold-text); }
.home-page .hm-world__name { margin: 0; font-size: var(--t-sub); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: inherit; overflow-wrap: anywhere; }
.home-page .hm-world__country { margin: 0; font-size: var(--t-micro); color: var(--c-on-dark-2); }
.home-page .hm-world__card--vietnam .hm-world__country { color: var(--c-muted); }
.home-page .hm-world__links { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.home-page .hm-world__links a {
    display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--r-sm);
    font-size: var(--t-small); font-weight: 600; color: inherit; text-decoration: none;
    transition: background-color 200ms var(--ease);
}
.home-page .hm-world__links a:hover { background: rgba(255, 255, 255, 0.1); color: inherit; text-decoration: none; }
.home-page .hm-world__card--vietnam .hm-world__links a:hover { background: #fff; }
.home-page .hm-world__links a:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-world__links .et-i { width: 14px; height: 14px; color: var(--c-brand-gold); flex: none; }
.home-page .hm-world__card--vietnam .hm-world__links .et-i { color: var(--c-brand-gold-deep); }

/* Popular flights: the From picker is radios and labels, no script. */
.home-page .hm-from { position: relative; }
.home-page .hm-from__in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.home-page .hm-from__tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; }
.home-page .hm-from__lbl { font-size: var(--t-small); font-weight: 600; color: var(--c-muted); }
.home-page .hm-from__tab {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; cursor: pointer;
    border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: #fff;
    font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
    transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.home-page .hm-from__tab:hover { border-color: var(--c-ink); }
.home-page .hm-from__panel { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-page #hmFrom-sgn:checked ~ .hm-from__tabs label[for="hmFrom-sgn"],
.home-page #hmFrom-han:checked ~ .hm-from__tabs label[for="hmFrom-han"],
.home-page #hmFrom-sin:checked ~ .hm-from__tabs label[for="hmFrom-sin"],
.home-page #hmFrom-bkk:checked ~ .hm-from__tabs label[for="hmFrom-bkk"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.home-page #hmFrom-sgn:focus-visible ~ .hm-from__tabs label[for="hmFrom-sgn"],
.home-page #hmFrom-han:focus-visible ~ .hm-from__tabs label[for="hmFrom-han"],
.home-page #hmFrom-sin:focus-visible ~ .hm-from__tabs label[for="hmFrom-sin"],
.home-page #hmFrom-bkk:focus-visible ~ .hm-from__tabs label[for="hmFrom-bkk"] { box-shadow: var(--ring); }
.home-page #hmFrom-sgn:checked ~ .hm-from__panels [data-from="sgn"],
.home-page #hmFrom-han:checked ~ .hm-from__panels [data-from="han"],
.home-page #hmFrom-sin:checked ~ .hm-from__panels [data-from="sin"],
.home-page #hmFrom-bkk:checked ~ .hm-from__panels [data-from="bkk"] { display: grid; }

/* Stays by type and Arrive easy: small tiles. */
.home-page .hm-stays__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-page .hm-arrive__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-page .hm-stay, .home-page .hm-arrive__tile {
    display: flex; flex-direction: column; gap: 4px; height: 100%; min-width: 0; padding: 16px;
    border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; color: var(--c-ink); text-decoration: none;
    transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.home-page .hm-stay:hover, .home-page .hm-arrive__tile:hover { border-color: var(--c-brand-gold); box-shadow: var(--sh-1); color: var(--c-ink); text-decoration: none; }
.home-page .hm-stay:focus-visible, .home-page .hm-arrive__tile:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-stay__ico, .home-page .hm-arrive__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; background: var(--c-bg-alt); color: var(--c-ink); }
.home-page .hm-arrive__ico { background: var(--c-espresso); color: var(--c-brand-gold); }
.home-page .hm-stay__ico .et-i, .home-page .hm-arrive__ico .et-i { width: 19px; height: 19px; }
.home-page .hm-stay strong, .home-page .hm-arrive__tile strong { font-size: var(--t-body); font-weight: 600; line-height: 1.25; }
.home-page .hm-stay small, .home-page .hm-arrive__tile small { font-size: var(--t-small); line-height: 1.4; color: var(--c-muted); }

/* The cards' photographs (2026-10-21). Never zoomed, never animated; the
   box keeps the photo's average colour until the bytes arrive. A
   destination's photograph fills the right side of the card and melts into
   the card's own colour under the words; a stay or a deal carries its
   photograph across the top with the icon sitting on its lower edge. */
.home-page .hm-world__shot, .home-page .hm-stay__shot, .home-page .hm-deal__shot {
    display: block; overflow: hidden; background: var(--bg, var(--c-bg-alt-2));
}
.home-page .hm-world__shot img, .home-page .hm-stay__shot img, .home-page .hm-deal__shot img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.home-page .hm-world__card { --card: var(--c-espresso); }
.home-page .hm-world__card--vietnam { --card: var(--c-bg-alt); }
.home-page .hm-world__shot { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 64%; pointer-events: none; }
.home-page .hm-world__shot::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--card) 72%, transparent) 30%, color-mix(in srgb, var(--card) 10%, transparent) 72%, transparent 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--card) 55%, transparent) 0%, transparent 45%);
}
.home-page .hm-world__card.has-photo .hm-world__name,
.home-page .hm-world__card.has-photo .hm-world__country,
.home-page .hm-world__card.has-photo .hm-world__links a { text-shadow: 0 1px 10px var(--card), 0 0 2px var(--card); }

.home-page .hm-deal.has-photo, .home-page .hm-stay.has-photo { overflow: hidden; }
.home-page .hm-deal.has-photo { --pad-y: 16px; --pad-x: 18px; padding: var(--pad-y) var(--pad-x); align-content: start; }
.home-page .hm-stay.has-photo { --pad-y: 16px; --pad-x: 16px; padding: var(--pad-y) var(--pad-x); }
.home-page .hm-deal__shot { grid-column: 1 / -1; margin: calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) 0; aspect-ratio: 16 / 9; align-self: start; }
.home-page .hm-stay__shot { margin: calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) 0; aspect-ratio: 16 / 10; }
.home-page .hm-deal.has-photo .hm-deal__ico, .home-page .hm-stay.has-photo .hm-stay__ico {
    position: relative; background: #fff; box-shadow: 0 0 0 3px #fff, var(--sh-1);
}
.home-page .hm-deal.has-photo .hm-deal__ico { align-self: start; margin-top: -36px; }
.home-page .hm-stay.has-photo .hm-stay__ico { margin-top: -22px; }

.home-page .hm-credits { margin: 14px 0 0; font-size: var(--t-micro); color: var(--c-muted); text-align: center; }
.home-page .hm-credits summary { display: inline-block; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); }
.home-page .hm-credits summary:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-credits ul { max-width: 920px; margin: 8px auto 0; padding: 0; list-style: none; text-align: left; columns: 2 320px; column-gap: 24px; }
.home-page .hm-credits li { break-inside: avoid; padding: 2px 0; line-height: 1.45; }
.home-page .hm-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.home-page .hm-credits p { margin: 6px 0 0; }

/* Concierge stands alone now. */
.home-page .hm-concierge .hm-cg { margin-top: 0; }
.home-page .hm-cg__title { margin: 0; }

/* Help and manage booking: three doors on the navy card. */
.home-page .hm-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.home-page .hm-help__door {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 8px;
    border-radius: var(--r-md); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    color: #fff; font-size: var(--t-small); font-weight: 600; text-align: center; text-decoration: none;
    transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.home-page .hm-help__door:hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--c-brand-gold); color: #fff; text-decoration: none; }
.home-page .hm-help__door:focus-visible { outline: none; box-shadow: var(--ring); }
.home-page .hm-help__door .et-i { width: 20px; height: 20px; color: var(--c-brand-gold); }

/* Travel guides and the app row. */
.home-page .hm-guides .hm-journal { margin-top: 0; }

@media (max-width: 1068px) {
    .home-page .hm-world__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-page .hm-deals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .hm-stays__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-page .hm-from__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
    .home-page .hm-deals, .home-page .hm-world, .home-page .hm-stays, .home-page .hm-arrive,
    .home-page .hm-concierge, .home-page .hm-guides { padding-block: 36px; }
    .home-page .hm-where__form { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 6px 6px 6px 16px; border-radius: var(--r-lg); }
    .home-page .hm-where__h { grid-column: 1 / -1; padding-top: 6px; font-size: var(--t-body); }
    .home-page .hm-where__field input { height: 44px; }
    .home-page .hm-where__go { min-height: 44px; padding-inline: 18px; }
    .home-page .hm-mytrip__card { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
    .home-page .hm-mytrip__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
    .home-page .hm-recent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-page .hm-deals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-page .hm-deal { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
    .home-page .hm-deal__go { display: none; }
    .home-page .hm-deal__ico { width: 36px; height: 36px; }
    .home-page .hm-deal__title { font-size: var(--t-small); }
    .home-page .hm-world__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-page .hm-stays__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-page .hm-arrive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-page .hm-stay, .home-page .hm-arrive__tile { padding: 14px 12px; }
    .home-page .hm-deal.has-photo { --pad-y: 14px; --pad-x: 14px; }
    .home-page .hm-stay.has-photo { --pad-y: 14px; --pad-x: 12px; }
    .home-page .hm-deal.has-photo .hm-deal__ico { margin-top: -30px; }
    .home-page .hm-world__shot { width: 60%; }
    .home-page .hm-from__panel { grid-template-columns: minmax(0, 1fr); }
    .home-page .hm-help { gap: 6px; }
}

/* One cream surface (2026-10-21): boxes lift off the cream as white cards
   with a soft shadow; no outlines, even on hover. */
.home-page .hm-deal, .home-page .hm-stay, .home-page .hm-arrive__tile, .home-page .featured-card,
.home-page .hm-sheet, .home-page .hm-where__form, .home-page .hm-where__chip, .home-page .hm-from__tab,
.home-page .hm-recent__card {
    border-color: transparent; background-color: #fff; box-shadow: var(--sh-card);
}
.home-page .hm-deal:hover, .home-page .hm-stay:hover, .home-page .hm-arrive__tile:hover, .home-page .featured-card:hover,
.home-page .hm-where__chip:hover, .home-page .hm-from__tab:hover, .home-page .hm-recent__card:hover {
    border-color: transparent; box-shadow: var(--sh-2);
}
.home-page .hm-where__form:focus-within { border-color: transparent; box-shadow: var(--ring), var(--sh-card); }

/* Smaller cards on a phone (2026-10-21, the owner's call): the page zoom
   shrinks words but not cards, which always fill the screen's width, so
   here the photographs get shorter and the cards' insides tighter. */
@media (max-width: 734px) {
    .home-page .hm-stay__shot { aspect-ratio: 2 / 1; }
    .home-page .hm-deal__shot { aspect-ratio: 2.2 / 1; }
    .home-page .hm-stay.has-photo, .home-page .hm-deal.has-photo { --pad-y: 10px; --pad-x: 10px; }
    .home-page .hm-stay.has-photo .hm-stay__ico, .home-page .hm-deal.has-photo .hm-deal__ico { width: 30px; height: 30px; }
    .home-page .hm-stay.has-photo .hm-stay__ico { margin-top: -18px; margin-bottom: 2px; }
    .home-page .hm-deal.has-photo .hm-deal__ico { margin-top: -22px; }
    .home-page .hm-stay strong, .home-page .hm-deal__title { font-size: 0.875rem; }
    .home-page .hm-stay small, .home-page .hm-deal__price, .home-page .hm-deal__price small { font-size: 0.75rem; }
    .home-page .hm-deal__price b { font-size: 1rem; }
    .home-page .hm-world__card { gap: 8px; padding: 12px 10px 8px; }
    .home-page .hm-world__name { font-size: 1.0625rem; }
    .home-page .hm-world__links a { min-height: 26px; gap: 6px; padding: 0 4px; font-size: 0.8125rem; }
    .home-page .hm-world__links .et-i { width: 12px; height: 12px; }
}
/* White site (2026-10-21): every homepage chapter on the one white ground. */
.home-page .hm-where, .home-page .hm-mytrip, .home-page .hm-recent { background: var(--c-cream, #fff); }
.home-page .hm-world__card--vietnam { --card: #fff; background: #fff; box-shadow: var(--sh-card); }

/* Card words at the site's own sizes, at every width (2026-10-21, the
   owner's call): a card's title is the site's small size, its second line
   the micro size, a price the body size. Same steps on every card. */
.home-page .hm-stay strong, .home-page .hm-deal__title, .home-page .hm-arrive__tile strong,
.home-page .hm-recent__title { font-size: var(--t-small); line-height: 1.3; }
.home-page .hm-stay small, .home-page .hm-arrive__tile small, .home-page .hm-deal__price,
.home-page .hm-deal__price small, .home-page .hm-world__country { font-size: var(--t-micro); }
.home-page .hm-deal__price b { font-size: var(--t-body); }
.home-page .hm-world__name { font-size: var(--t-body); }
.home-page .hm-world__links a { font-size: var(--t-small); }
.home-page .hm-world__code { font-size: var(--t-micro); }

/* Trending destinations as photo cards (2026-10-21): the photograph fills
   the card, one soft fade at the bottom carries the words, the three links
   are small pills. Every card the same, Vietnam included. Text sizes for
   these cards live in font-size.css. */
.home-page .hm-world__card,
.home-page .hm-world__card--vietnam {
    --card: #0b1a3a;
    justify-content: flex-end; gap: 8px; min-height: 176px; padding: 12px;
    background: var(--card); color: #fff; box-shadow: none;
}
.home-page .hm-world__shot { inset: 0; width: 100%; }
.home-page .hm-world__shot::after {
    background: linear-gradient(0deg, rgba(8, 18, 40, 0.88) 0%, rgba(8, 18, 40, 0.4) 45%, rgba(8, 18, 40, 0) 72%);
}
.home-page .hm-world__code { display: none; }
.home-page .hm-world__card .hm-world__country,
.home-page .hm-world__card--vietnam .hm-world__country { color: rgba(255, 255, 255, 0.82); }
.home-page .hm-world__card.has-photo .hm-world__name,
.home-page .hm-world__card.has-photo .hm-world__country,
.home-page .hm-world__card.has-photo .hm-world__links a { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.home-page .hm-world__links { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.home-page .hm-world__links a,
.home-page .hm-world__card--vietnam .hm-world__links a {
    min-height: 24px; gap: 4px; padding: 0 8px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.home-page .hm-world__links a:hover,
.home-page .hm-world__card--vietnam .hm-world__links a:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.home-page .hm-world__links .et-i,
.home-page .hm-world__card--vietnam .hm-world__links .et-i { width: 11px; height: 11px; color: #fff; }

/* ============================================================
   11: PARTNERS, who Elite books with (2026-10-25)
   Airline logo wall (Duffel-hosted lockups) and famous-hotel cards.
   ============================================================ */
.home-page .hm-partners__line, .home-page .hm-hotels__line { margin: 0 0 14px; color: var(--c-muted, #5b6472); font-size: 15px; }
.home-page .hm-partners__logos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-page .hm-partners__logos li a {
    display: flex; align-items: center; justify-content: center; height: 56px; padding: 8px 14px;
    border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff;
    transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.home-page .hm-partners__logos li a:hover { border-color: var(--c-ink); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.home-page .hm-partners__logos img { display: block; height: 32px; width: auto; max-width: 150px; object-fit: contain; }
.home-page .hm-partners__more, .home-page .hm-hotels__note { margin: 12px 0 0; color: var(--c-muted, #5b6472); font-size: 14px; }
.home-page .hm-hotels__brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.home-page .hm-hotels__brands li { padding: 6px 12px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; }
.home-page .hm-hotels__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-page .hm-hotel {
    display: block; height: 100%; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: #fff; color: var(--c-ink); text-decoration: none;
    transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.home-page .hm-hotel:hover { border-color: var(--c-ink); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.home-page .hm-hotel img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.home-page .hm-hotel strong { display: block; padding: 10px 12px 0; font-size: 14px; line-height: 1.3; }
.home-page .hm-hotel small { display: block; padding: 2px 12px 12px; color: var(--c-muted, #5b6472); }
@media (max-width: 960px) { .home-page .hm-hotels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .home-page .hm-hotels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-page .hm-partners__logos li a { height: 48px; padding: 6px 10px; }
    .home-page .hm-partners__logos img { height: 26px; max-width: 120px; }
}