/* ==========================================================================
   HX — Home experience (cinematic, CMS-driven)
   One brand system, a distinct composition per category:
     hero (cinema) · search (dock) · packages (editorial spread) · destinations (atlas)
     hotels (dark luxury, pinned horizontal) · taxi (mobility console) · routes (tickets)
   Motion: transform / opacity / clip-path only; triggered by IntersectionObserver
   (home.js). Content is fully visible without JS; reduced-motion = static.
   ========================================================================== */
.hx {
  --hx-ink: #0a1428;
  --hx-ink-2: #22304a;
  --hx-sub: #56657d;
  --hx-mute: #8e9ab0;
  --hx-line: rgba(10, 20, 40, .09);
  --hx-paper: #f6f4ef;          /* warm editorial paper */
  --hx-night: #0b0d14;          /* luxury dark */
  --hx-gold: #d2b27c;
  --hx-gold-2: #a8844b;
  --hx-ok: #0e8a5f;
  --hx-req: #b45309;
  --hx-r: 28px;
  --hx-ease: cubic-bezier(.16, 1, .3, 1);
  --hx-ease-io: cubic-bezier(.7, 0, .2, 1);
  --hx-hdr: 64px;
  overflow-x: clip;
  color: var(--hx-ink);
}
.hx .container { position: relative; }
.hx-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; letter-spacing: -.01em; }
.hx-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-fb { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.4);
  background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--tp) 50%, transparent), transparent 55%),
              radial-gradient(90% 80% at 10% 100%, rgba(56,120,255,.32), transparent 60%), linear-gradient(150deg, #16264a, #070e1f); }
.hx-fb-gold { background: radial-gradient(90% 70% at 80% 10%, rgba(210,178,124,.35), transparent 60%), linear-gradient(160deg, #1c1810, #0b0d14); color: rgba(210,178,124,.55); }

/* ---------- sections & chapter headers ---------- */
.hx-sec { position: relative; padding: clamp(72px, 9vw, 132px) 0; }
.hx-t-tint { background: var(--hx-paper); }
.hx-t-dark { background: var(--hx-night); color: #eef1f6; }
.hx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(32px, 4vw, 56px); }
.hx-head-l { max-width: 760px; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--tp); }
.hx-chap { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 7px; border-radius: 999px; border: 1px solid currentColor; font-size: .66rem; letter-spacing: .06em; }
.hx-title { margin: 14px 0 0; font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: .98; letter-spacing: -.045em; color: inherit; text-wrap: balance; }
.hx-sub { margin: 18px 0 0; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.6; color: var(--hx-sub); max-width: 58ch; }
.hx-t-dark .hx-sub { color: rgba(238,241,246,.62); }
.hx-t-dark .hx-eyebrow { color: var(--hx-gold); }
.hx-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 22px; border-radius: 999px; border: 1px solid var(--hx-line);
  color: var(--hx-ink); font-weight: 700; font-size: .9rem; text-decoration: none; background: #fff; transition: background .35s, color .35s, border-color .35s, gap .35s var(--hx-ease); }
.hx-more:hover { background: var(--hx-ink); color: #fff; border-color: var(--hx-ink); gap: 14px; }
.hx-t-dark .hx-more { background: transparent; color: #eef1f6; border-color: rgba(255,255,255,.18); }
.hx-t-dark .hx-more:hover { background: var(--hx-gold); color: #1a1409; border-color: var(--hx-gold); }

/* shared bits */
.hx-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff;
  background: rgba(8,14,30,.46); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }
.hx-tag svg { width: 13px; height: 13px; }
.hx-tag-gold { color: #2a1c05; background: linear-gradient(135deg, #f6dfaa, #d9b16a); border-color: transparent; }
.hx-tag-hot { background: #e11d48; border-color: transparent; }
.hx-price { display: flex; flex-wrap: wrap; align-items: baseline; line-height: 1; gap: 6px 4px; }
.hx-price > small:first-child { flex-basis: 100%; }
.hx-price small { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-mute); }
.hx-price b { font-size: 1.9rem; font-weight: 900; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hx-price b + small { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .78rem; }
.hx-price-sm b { font-size: 1.3rem; }
.hx-avail { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; color: var(--hx-ok); white-space: nowrap; }
.hx-avail i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hx-avail i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: hxPulse 2.6s var(--hx-ease) infinite; }
.hx-avail.req { color: var(--hx-req); }
.hx-avail.req i::after { animation: none; }
@keyframes hxPulse { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
.hx-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .86rem; }
.hx-rating svg { color: #f0a92e; fill: #f0a92e; }
.hx-cta { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px 0 24px; border-radius: 999px; background: var(--hx-ink); color: #fff;
  font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .35s, box-shadow .35s, gap .35s var(--hx-ease); }
.hx-cta:hover { background: var(--tp); color: #fff; gap: 14px; box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--tp) 75%, transparent); }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px 0 28px; border-radius: 999px; font-weight: 700; font-size: .98rem;
  text-decoration: none; border: 1px solid transparent; transition: background .35s, color .35s, gap .35s var(--hx-ease), transform .2s; cursor: pointer; }
.hx-btn:active { transform: scale(.97); }
.hx-btn-light { background: #fff; color: var(--hx-ink); }
.hx-btn-light:hover { background: var(--tp); color: #fff; gap: 14px; }
.hx-btn-ghost { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hx-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.hx-btn-block { width: 100%; }
.hx a:focus-visible, .hx button:focus-visible { outline: 2px solid var(--tp); outline-offset: 3px; }

/* ==========================================================================
   HERO — cinema
   ========================================================================== */
.hx-hero { position: relative; isolation: isolate; height: clamp(600px, calc(100svh - var(--hx-hdr)), 940px); color: #fff; overflow: hidden; background: #05080f; }
.hx-stage { position: absolute; inset: 0; will-change: transform; }
.hx-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.4s var(--hx-ease-io), visibility 0s 1.4s; }
.hx-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.4s var(--hx-ease-io), visibility 0s; z-index: 1; }
.hx-slide-media { position: absolute; inset: -4%; }
.hx-slide-media picture, .hx-slide-img, .hx-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-slide.is-on .hx-slide-media { animation: hxKen var(--hx-int, 7s) linear forwards; }
@keyframes hxKen { from { transform: scale(1.1) translate3d(-1%, 0, 0); } to { transform: scale(1.0) translate3d(1%, -1%, 0); } }
.hx-slide-fb { position: absolute; inset: 0; background: radial-gradient(90% 90% at 70% 20%, color-mix(in srgb, var(--tp) 45%, transparent), transparent 60%), linear-gradient(160deg, #10203c, #05080f); }
.hx-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,8,18,.78) 0%, rgba(4,8,18,.46) 38%, rgba(4,8,18,.05) 70%),
              linear-gradient(180deg, rgba(4,8,18,.35) 0%, rgba(4,8,18,0) 22%, rgba(4,8,18,0) 60%, rgba(4,8,18,.82) 100%); }
.hx-grain { position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hx-hero-in { position: relative; z-index: 4; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: end; gap: 48px; padding-bottom: 196px; }
.hx-copies { position: relative; min-height: 360px; }
.hx-copy { position: absolute; left: 0; right: 0; bottom: 0; visibility: hidden; }
.hx-copy.is-on { position: relative; visibility: visible; }
.hx-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.hx-cat { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--hx-ink); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; }
.hx-place { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.86); }
.hx-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; color: #2a1c05; background: linear-gradient(135deg, #f6dfaa, #d9b16a); font-weight: 800; font-size: .72rem; }
.hx-h { margin: 0; font-size: clamp(2.7rem, 6.6vw, 6.2rem); font-weight: 800; line-height: .92; letter-spacing: -.055em; color: #fff; max-width: 13ch; text-wrap: balance; text-shadow: 0 2px 34px rgba(0,0,0,.22); }
.hx-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hx-h .w > span { display: inline-block; }
.hx-copy.is-on .hx-h .w > span { animation: hxWord 1.15s var(--hx-ease) both; animation-delay: calc(var(--wi) * 70ms + 120ms); }
.hx-copy.is-on .hx-kicker { animation: hxRise .9s var(--hx-ease) both .02s; }
.hx-copy.is-on .hx-lede { animation: hxRise 1s var(--hx-ease) both .5s; }
.hx-copy.is-on .hx-actions { animation: hxRise 1s var(--hx-ease) both .65s; }
.hx-copy.is-on .hx-promo { animation: hxRise 1s var(--hx-ease) both .8s; }
@keyframes hxWord { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
@keyframes hxRise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.hx-lede { margin: 24px 0 0; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,.82); max-width: 50ch; }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }
.hx-price-chip { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 8px; color: #fff; }
.hx-price-chip small { font-size: .74rem; color: rgba(255,255,255,.66); font-weight: 600; }
.hx-price-chip b { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hx-promo { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .86rem; font-weight: 600; color: #f6dfaa; }
/* slide reel */
.hx-reel { align-self: end; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 22px; background: rgba(6,10,22,.38); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.hx-reel-i { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 4px 10px; padding: 12px 12px 14px; border: 0; border-radius: 14px;
  background: transparent; color: rgba(255,255,255,.6); text-align: left; cursor: pointer; transition: background .35s, color .35s; }
.hx-reel-i:hover { background: rgba(255,255,255,.06); color: #fff; }
.hx-reel-i.is-on { background: rgba(255,255,255,.1); color: #fff; }
.hx-reel-n { font-size: .82rem; font-weight: 800; }
.hx-reel-t { font-size: .84rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-reel-bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.hx-reel-bar i { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.hx-reel-i.is-on .hx-reel-bar i { animation: hxBar var(--hx-int, 7s) linear forwards; }
.hx-hero.is-paused .hx-reel-i.is-on .hx-reel-bar i, .hx-hero[data-autoplay="0"] .hx-reel-i.is-on .hx-reel-bar i { animation-play-state: paused; }
.hx-hero[data-autoplay="0"] .hx-reel-i.is-on .hx-reel-bar i { animation: none; transform: scaleX(1); }
@keyframes hxBar { to { transform: scaleX(1); } }
.hx-cue { position: absolute; z-index: 5; left: 50%; bottom: 96px; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.4); display: none; }
.hx-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: hxCue 1.8s var(--hx-ease) infinite; }
@keyframes hxCue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

/* ==========================================================================
   SEARCH — floating dock over the hero edge (reuses the existing gsearch)
   ========================================================================== */
.hx-dock-wrap { position: relative; z-index: 6; margin-top: -132px; padding-bottom: 12px; }
.hx .hx-gsearch { margin-top: 0; }
.hx-dock { position: relative; }
.hx-dock-title { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px 8px; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hx-gsearch { box-shadow: 0 40px 80px -40px rgba(4,10,24,.55), 0 2px 6px rgba(4,10,24,.06); }
.hx-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding: 0 6px; }
.hx-quick-l { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-mute); margin-right: 4px; }
.hx-quick-i { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--hx-line); font-size: .84rem; font-weight: 600;
  color: var(--hx-ink); text-decoration: none; transition: border-color .25s, transform .25s var(--hx-ease), box-shadow .25s; }
.hx-quick-i:hover { border-color: var(--tp); color: var(--tp); transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(10,20,40,.4); }
.hx-quick-i em { font-style: normal; font-size: .64rem; font-weight: 800; color: #fff; background: var(--tp); padding: 2px 7px; border-radius: 999px; }

/* ==========================================================================
   PACKAGES — editorial spread
   ========================================================================== */
.hx-journeys { background: linear-gradient(180deg, #fff 0%, var(--hx-paper) 100%); }
.hx-spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.hx-lead { position: relative; padding-bottom: 90px; }
.hx-lead-media { position: relative; display: block; aspect-ratio: 4 / 4.4; border-radius: var(--hx-r); overflow: hidden; background: #0a1428; }
.hx-lead-media .hx-img { transition: transform 1.4s var(--hx-ease); }
.hx-lead:hover .hx-lead-media .hx-img { transform: scale(1.05); }
.hx-lead-tags { position: absolute; top: 22px; left: 22px; right: 22px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 2; }
.hx-slab { position: absolute; left: 36px; right: -18px; bottom: 0; z-index: 3; padding: 30px 32px 28px; border-radius: 24px; background: #fff;
  box-shadow: 0 50px 90px -46px rgba(10,20,40,.55), 0 1px 2px rgba(10,20,40,.05); }
.hx-slab-place { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tp); }
.hx-slab-title { margin: 10px 0 0; font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.hx-slab-title a, .hx-sidecard-t a { color: var(--hx-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--hx-ease); }
.hx-lead:hover .hx-slab-title a, .hx-sidecard:hover .hx-sidecard-t a { background-size: 100% 2px; }
.hx-slab-sub, .hx-slab-promo { margin: 12px 0 0; font-size: .95rem; line-height: 1.55; color: var(--hx-sub); max-width: 52ch; }
.hx-slab-promo { color: var(--hx-req); font-weight: 600; }
.hx-incl { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.hx-incl li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--hx-ink-2); line-height: 1.4; }
.hx-incl svg { flex: 0 0 auto; margin-top: 2px; color: var(--hx-ok); }
.hx-slab-foot { display: flex; align-items: flex-end; gap: 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hx-line); }
.hx-slab-foot .hx-cta { margin-left: auto; }
.hx-side { display: flex; flex-direction: column; gap: 18px; padding-top: 0; }
.hx-sidecard { display: grid; grid-template-columns: 42% 1fr; min-height: 196px; border-radius: 24px; background: #fff; overflow: hidden; border: 1px solid var(--hx-line);
  box-shadow: 0 30px 60px -44px rgba(10,20,40,.5); transition: transform .6s var(--hx-ease), box-shadow .6s var(--hx-ease); }
.hx-sidecard.is-offset { margin-left: 56px; }
.hx-sidecard:hover { transform: translate3d(-6px, -4px, 0); box-shadow: 0 44px 70px -40px rgba(10,20,40,.55); }
.hx-sidecard-media { position: relative; display: block; overflow: hidden; background: #0a1428; }
.hx-sidecard-media .hx-img { position: absolute; inset: 0; transition: transform 1.2s var(--hx-ease); }
.hx-sidecard:hover .hx-sidecard-media .hx-img { transform: scale(1.08); }
.hx-sidecard-media .hx-tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.hx-sidecard-b { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; min-width: 0; }
.hx-sidecard-t { margin: 0; font-size: 1.22rem; line-height: 1.12; letter-spacing: -.03em; font-weight: 800; }
.hx-hl { font-size: .82rem; color: var(--hx-sub); line-height: 1.45; }
.hx-sidecard-f { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 10px; padding-top: 12px; border-top: 1px dashed var(--hx-line); }
/* numbered ribbon */
.hx-ribbon { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 16px; margin-top: 48px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hx-ribbon::-webkit-scrollbar { display: none; }
.hx-journeys.is-rail .hx-ribbon { margin-top: 0; }
.hx-ribbon-i { scroll-snap-align: start; display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 20px;
  background: #fff; border: 1px solid var(--hx-line); text-decoration: none; color: var(--hx-ink); transition: border-color .3s, transform .5s var(--hx-ease), box-shadow .5s; }
.hx-ribbon-i:hover { border-color: color-mix(in srgb, var(--tp) 30%, var(--hx-line)); transform: translate3d(0, -4px, 0); box-shadow: 0 24px 40px -30px rgba(10,20,40,.5); color: var(--hx-ink); }
.hx-ribbon-img { position: relative; width: 86px; height: 86px; border-radius: 14px; overflow: hidden; background: #0a1428; }
.hx-ribbon-img .hx-img { position: absolute; inset: 0; }
.hx-ribbon-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hx-ribbon-n { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--tp); }
.hx-ribbon-t { font-weight: 800; font-size: .98rem; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-ribbon-m { font-size: .76rem; color: var(--hx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-ribbon-p { font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.hx-ribbon-p small { font-weight: 600; color: var(--hx-mute); font-size: .72rem; margin-left: 2px; }
.hx-ribbon-go { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--hx-paper); transition: background .3s, color .3s, transform .5s var(--hx-ease); }
.hx-ribbon-i:hover .hx-ribbon-go { background: var(--hx-ink); color: #fff; transform: rotate(-35deg); }

/* ==========================================================================
   DESTINATIONS — atlas
   ========================================================================== */
.hx-atlas { background: #fbfaf7; overflow: hidden; }
.hx-contours { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-radial-gradient(circle at 12% 18%, transparent 0 26px, rgba(10,20,40,.045) 27px 28px),
    repeating-radial-gradient(circle at 88% 82%, transparent 0 34px, rgba(10,20,40,.04) 35px 36px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 75%); }
.hx-atlas-meta { display: flex; align-items: center; gap: 16px; margin: -18px 0 26px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-mute); }
.hx-atlas-meta > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.hx-atlas-line { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--hx-mute) 0 4px, transparent 4px 10px); opacity: .5; }
.hx-atlas-deck { display: flex; gap: 12px; height: clamp(480px, 62vh, 620px); contain: layout paint; }
.hx-atlas-p { position: relative; flex: 1 1 0; min-width: 0; border-radius: 26px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: #0a1428;
  transition: flex-grow .9s var(--hx-ease), box-shadow .6s; }
.hx-atlas-p.is-open { flex-grow: 5.2; box-shadow: 0 50px 90px -50px rgba(10,20,40,.7); }
.hx-atlas-p:hover, .hx-atlas-p:focus-visible { color: #fff; }
.hx-atlas-media { position: absolute; inset: 0; }
.hx-atlas-media .hx-img { position: absolute; inset: 0; transform: scale(1.12); transition: transform 1.6s var(--hx-ease), filter .9s; filter: saturate(.75) brightness(.8); }
.hx-atlas-p.is-open .hx-atlas-media .hx-img { transform: scale(1.02); filter: none; }
.hx-atlas-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,8,18,.25) 0%, rgba(4,8,18,.05) 35%, rgba(4,8,18,.86) 100%); }
.hx-atlas-spine { position: absolute; z-index: 2; inset: 22px 0 22px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: opacity .45s; }
.hx-atlas-no { font-size: .66rem; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.72); }
.hx-atlas-vname { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.hx-atlas-p.is-open .hx-atlas-spine { opacity: 0; }
.hx-atlas-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 34px 36px 32px; display: flex; flex-direction: column; gap: 12px; min-width: 420px;
  opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .5s ease, transform .9s var(--hx-ease); pointer-events: none; }
.hx-atlas-p.is-open .hx-atlas-info { opacity: 1; transform: none; transition-delay: .25s; }
.hx-atlas-coord { font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.72); }
.hx-atlas-name { font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 800; line-height: .92; letter-spacing: -.05em; }
.hx-atlas-desc { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 48ch; }
.hx-atlas-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .84rem; color: rgba(255,255,255,.78); }
.hx-atlas-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.hx-atlas-stats b { color: #fff; font-size: 1rem; }
.hx-atlas-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }
.hx-atlas-from { font-size: .84rem; color: rgba(255,255,255,.72); }
.hx-atlas-from b { font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; margin-left: 4px; }
.hx-atlas-go { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--hx-ink); font-weight: 700; font-size: .9rem; transition: gap .35s var(--hx-ease), background .3s, color .3s; }
.hx-atlas-p:hover .hx-atlas-go { gap: 12px; background: var(--tp); color: #fff; }
.hx-atlas-badge { order: -1; align-self: flex-start; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2a1c05; background: linear-gradient(135deg, #f6dfaa, #d9b16a); padding: 5px 11px; border-radius: 999px; }
.hx-atlas.is-rail .hx-atlas-deck { height: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hx-atlas.is-rail .hx-atlas-p { aspect-ratio: 3 / 4; scroll-snap-align: start; }
.hx-atlas.is-rail .hx-atlas-info { opacity: 1; transform: none; min-width: 0; padding: 22px; }
.hx-atlas.is-rail .hx-atlas-spine { display: none; }
.hx-atlas.is-rail .hx-atlas-name { font-size: 2rem; }

/* ==========================================================================
   HOTELS — dark luxury, pinned horizontal gallery
   ========================================================================== */
.hx-stays { padding: 0; background: radial-gradient(80% 60% at 90% 0%, rgba(210,178,124,.14), transparent 60%), var(--hx-night); }
.hx-stays-pin { position: relative; padding: clamp(80px, 9vw, 120px) 0 clamp(70px, 8vw, 100px); }
.hx-stays-track { display: flex; align-items: stretch; gap: 26px; padding: 0 max(24px, calc((100vw - 1320px) / 2 + 12px)); scroll-padding-inline: max(24px, calc((100vw - 1320px) / 2 + 12px)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hx-stays-track::-webkit-scrollbar { display: none; }
.hx-stays-intro { flex: 0 0 min(440px, 86vw); display: flex; flex-direction: column; justify-content: space-between; padding: 8px 20px 8px 0; scroll-snap-align: start; }
.hx-stays-intro .hx-head { flex-direction: column; align-items: flex-start; margin: 0; }
.hx-stays-intro .hx-more { margin-top: 28px; }
.hx-stays-count { display: flex; flex-direction: column; gap: 10px; color: rgba(238,241,246,.62); font-size: .95rem; }
.hx-stays-count b { font-size: 5.6rem; line-height: .8; letter-spacing: -.06em; color: var(--hx-gold); font-weight: 800; }
.hx-stays-count span { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(238,241,246,.45); }
.hx-stay { position: relative; flex: 0 0 min(420px, 82vw); height: clamp(520px, 66vh, 620px); border-radius: 26px; overflow: hidden; isolation: isolate; scroll-snap-align: start;
  background: #151820; border: 1px solid rgba(210,178,124,.12); transition: transform .7s var(--hx-ease), border-color .5s; }
.hx-stay:hover { border-color: rgba(210,178,124,.45); transform: translate3d(0, -6px, 0); }
.hx-stay-media { position: absolute; inset: 0; display: block; overflow: hidden; }
.hx-stay-media .hx-img { position: absolute; inset: 0; transform: scale(1.06); transition: transform 1.6s var(--hx-ease); }
.hx-stay:hover .hx-stay-media .hx-img { transform: scale(1.12); }
.hx-stay-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,7,11,.55) 0%, rgba(6,7,11,0) 26%, rgba(6,7,11,.15) 45%, rgba(6,7,11,.94) 100%); }
.hx-stay-top { position: absolute; z-index: 2; top: 20px; left: 22px; right: 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.hx-stay-stars { color: var(--hx-gold); letter-spacing: 3px; font-size: .9rem; }
.hx-stay-rate { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: rgba(255,255,255,.8); }
.hx-stay-rate b { display: inline-grid; place-items: center; min-width: 34px; height: 24px; border-radius: 8px; background: var(--hx-gold); color: #1a1409; font-size: .78rem; }
.hx-stay-badge { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1a1409; background: var(--hx-gold); padding: 6px 11px; border-radius: 999px; }
.hx-stay-b { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.hx-stay-b a { pointer-events: auto; }
.hx-stay-loc { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-gold); }
.hx-stay-name { margin: 0; font-size: 1.85rem; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.hx-stay-name a { color: #fff; text-decoration: none; }
.hx-stay-offer { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: #f6dfaa; }
.hx-stay-amen { display: flex; flex-wrap: wrap; gap: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--hx-ease), opacity .45s; }
.hx-stay:hover .hx-stay-amen, .hx-stay:focus-within .hx-stay-amen { max-height: 80px; opacity: 1; }
.hx-stay-amen span { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.86); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); }
.hx-stay-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.hx-stay-price { display: flex; align-items: baseline; gap: 6px; color: #fff; }
.hx-stay-price small { font-size: .74rem; color: rgba(255,255,255,.55); }
.hx-stay-price b { font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hx-stay-price b.ask { font-size: 1rem; font-weight: 700; }
.hx-stay-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--hx-gold); color: #1a1409; font-weight: 800; font-size: .84rem; text-decoration: none; transition: gap .35s var(--hx-ease), background .3s; }
.hx-stay-cta:hover { gap: 12px; background: #f6dfaa; color: #1a1409; }
.hx-stay-avail { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; color: #6ee7b7; }
.hx-stay-avail i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(110,231,183,.18); }
.hx-stay-avail.req { color: #fcd34d; }
.hx-stays-end { flex: 0 0 260px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 16px; padding: 30px; border-radius: 26px; scroll-snap-align: start;
  border: 1px dashed rgba(210,178,124,.35); color: var(--hx-gold); text-decoration: none; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; transition: background .4s, color .4s; }
.hx-stays-end:hover { background: var(--hx-gold); color: #1a1409; }
.hx-stays-progress { height: 2px; margin: 34px max(24px, calc((100vw - 1320px) / 2 + 12px)) 0; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.hx-stays-progress i { display: block; height: 100%; width: 100%; background: var(--hx-gold); transform: scaleX(var(--p, .08)); transform-origin: 0 50%; }
/* pinned mode (enabled by JS on wide screens) */
.hx-stays.is-pinned .hx-stays-pin { position: sticky; top: var(--hx-hdr); height: calc(100vh - var(--hx-hdr)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 0; }
.hx-stays.is-pinned .hx-stays-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.hx-stays.is-pinned .hx-stay { height: min(66vh, 600px); }

/* ==========================================================================
   TAXI — mobility console
   ========================================================================== */
.hx-move { background: #eef1f5; overflow: hidden; }
.hx-lanes { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(10,20,40,.035) 46px 47px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.hx-move-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(30px, 4vw, 48px); }
.hx-move-top .hx-head { margin: 0; }
.hx-live { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--hx-ink); color: rgba(255,255,255,.7); font-size: .78rem; }
.hx-live > span { padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.hx-live b { color: #fff; font-variant-numeric: tabular-nums; }
.hx-live-dot { display: inline-flex; align-items: center; gap: 8px; background: rgba(34,211,238,.12); color: #67e8f9 !important; font-weight: 700; }
.hx-live-dot i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; }
.hx-live-dot i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #22d3ee; animation: hxPulse 2s var(--hx-ease) infinite; }
.hx-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hx-mode { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 230px; padding: 24px 22px 20px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: #fff; border: 1px solid var(--hx-line); color: var(--hx-ink); text-decoration: none; transition: background .45s var(--hx-ease), color .45s, transform .5s var(--hx-ease), border-color .45s; }
.hx-mode:hover { background: var(--hx-ink); color: #fff; border-color: var(--hx-ink); transform: translate3d(0, -6px, 0); }
.hx-mode-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--tp) 10%, #fff); color: var(--tp); margin-bottom: 8px; transition: background .45s, color .45s; }
.hx-mode:hover .hx-mode-ic { background: #22d3ee; color: var(--hx-ink); }
.hx-mode-l { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.hx-mode-l em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--tp); padding: 3px 8px; border-radius: 999px; }
.hx-mode-d { font-size: .86rem; line-height: 1.5; color: var(--hx-sub); transition: color .45s; }
.hx-mode:hover .hx-mode-d { color: rgba(255,255,255,.66); }
.hx-mode-f { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--hx-line); font-size: .82rem; color: var(--hx-mute); transition: border-color .45s; }
.hx-mode:hover .hx-mode-f { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.6); }
.hx-mode-f b { font-size: 1.12rem; color: var(--hx-ink); transition: color .45s; }
.hx-mode:hover .hx-mode-f b { color: #67e8f9; }
.hx-mode-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hx-line); transition: transform .5s var(--hx-ease), background .4s, border-color .4s; }
.hx-mode:hover .hx-mode-go { background: #22d3ee; border-color: #22d3ee; color: var(--hx-ink); transform: translateX(4px); }
.hx-speed { position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 60%; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(34,211,238,.14) 18px 19px); transform: skewX(-18deg) translateX(0); opacity: 0; }
.hx-mode:hover .hx-speed { animation: hxSpeed .9s var(--hx-ease) forwards; }
@keyframes hxSpeed { from { transform: skewX(-18deg) translateX(0); opacity: .9; } to { transform: skewX(-18deg) translateX(320%); opacity: 0; } }
.hx-fleet-h { display: flex; align-items: center; gap: 16px; margin: 56px 0 18px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-mute); }
.hx-fleet-h > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--hx-ink); }
.hx-fleet-rule { flex: 1; height: 1px; background: var(--hx-line); }
.hx-fleet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hx-veh { display: grid; grid-template-columns: 210px 1fr; border-radius: 22px; overflow: hidden; background: #0d1422; color: #e7ecf5; border: 1px solid #1b2436; transition: transform .5s var(--hx-ease), border-color .4s; }
.hx-veh:hover { transform: translate3d(0, -4px, 0); border-color: rgba(34,211,238,.4); }
.hx-veh-media { position: relative; display: block; overflow: hidden; background: linear-gradient(160deg, #13203a, #070c16); }
.hx-veh-media .hx-img { position: absolute; inset: 0; }
.hx-veh-fb { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(103,232,249,.5); }
.hx-veh-fb svg { transition: transform .8s var(--hx-ease); }
.hx-veh:hover .hx-veh-fb svg { transform: translateX(12px); }
.hx-road { position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(103,232,249,.55) 0 14px, transparent 14px 28px); background-size: 28px 2px; animation: hxRoad 1.2s linear infinite; animation-play-state: paused; }
.hx-veh:hover .hx-road { animation-play-state: running; }
@keyframes hxRoad { to { background-position: -28px 0; } }
.hx-veh-b { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; min-width: 0; }
.hx-veh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hx-veh-name { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.hx-veh-name a { color: #fff; text-decoration: none; }
.hx-veh-badge { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hx-ink); background: #22d3ee; padding: 4px 9px; border-radius: 999px; }
.hx-veh-sub, .hx-veh-promo { font-size: .8rem; color: rgba(231,236,245,.55); line-height: 1.45; }
.hx-veh-promo { color: #67e8f9; }
.hx-spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 4px 0 0; border-radius: 12px; overflow: hidden; background: #1b2436; }
.hx-spec > div { background: #111a2b; padding: 9px 10px; }
.hx-spec dt { font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(231,236,245,.4); margin: 0; }
.hx-spec dd { margin: 2px 0 0; font-size: 1rem; font-weight: 800; color: #fff; }
.hx-veh-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 2px; }
.hx-veh-foot .hx-avail { color: #6ee7b7; }
.hx-veh-foot .hx-avail.req { color: #fcd34d; }
.hx-veh-from { font-size: .78rem; color: rgba(231,236,245,.6); }
.hx-veh-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #22d3ee; color: var(--hx-ink); font-weight: 800; font-size: .82rem; text-decoration: none; transition: gap .35s var(--hx-ease), background .3s; }
.hx-veh-cta:hover { gap: 12px; background: #fff; color: var(--hx-ink); }

/* ==========================================================================
   ROUTES — boarding-pass tickets
   ========================================================================== */
.hx-tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hx-ticket { position: relative; display: grid; grid-template-columns: 1fr 128px; border-radius: 22px; background: #fff; border: 1px solid var(--hx-line); text-decoration: none; color: var(--hx-ink);
  transition: transform .5s var(--hx-ease), box-shadow .5s; }
.hx-ticket:hover { color: var(--hx-ink); transform: translate3d(0, -5px, 0); box-shadow: 0 30px 50px -36px rgba(10,20,40,.55); }
.hx-ticket::before, .hx-ticket::after { content: ""; position: absolute; right: 118px; width: 20px; height: 20px; border-radius: 50%; background: var(--hx-paper); }
.hx-t-light .hx-ticket::before, .hx-t-light .hx-ticket::after { background: #fff; box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-ticket::before { top: -10px; } .hx-ticket::after { bottom: -10px; }
.hx-ticket-main { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; border-right: 2px dashed var(--hx-line); }
.hx-ticket-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-mute); }
.hx-ticket-kind em { font-style: normal; color: #fff; background: var(--tp); padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; white-space: nowrap; font-size: .62rem; }
.hx-ticket-leg { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.hx-ticket-pt { display: flex; flex-direction: column; min-width: 0; }
.hx-ticket-pt b { font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.hx-ticket-pt small { font-size: .72rem; color: var(--hx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.hx-ticket-pt.is-to { text-align: right; align-items: flex-end; }
.hx-ticket-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--hx-mute) 0 4px, transparent 4px 9px); opacity: .7; }
.hx-ticket-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--hx-ink); }
.hx-ticket-car { position: absolute; top: -12px; left: calc(50% - 12px); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--tp); color: #fff; transition: left 1.2s var(--hx-ease); }
.hx-ticket:hover .hx-ticket-car { left: calc(100% - 24px); }
.hx-ticket-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--hx-sub); }
.hx-ticket-promo { color: var(--hx-req); font-weight: 700; }
.hx-ticket-stub { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 16px; text-align: center; align-items: center; }
.hx-ticket-stub small { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-mute); }
.hx-ticket-stub b { font-size: 1.25rem; font-weight: 900; }
.hx-ticket-go { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; color: var(--tp); white-space: nowrap; }

/* ==========================================================================
   COLLECTION — posters
   ========================================================================== */
.hx-posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 24px 20px; }
.hx-poster { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--hx-ink); }
.hx-poster:hover { color: var(--hx-ink); }
.hx-poster.is-lead { grid-column: span 2; grid-row: span 2; }
.hx-poster-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #0a1428; }
.hx-poster.is-lead .hx-poster-media { aspect-ratio: auto; flex: 1; min-height: 420px; }
.hx-poster-media .hx-img { position: absolute; inset: 0; transition: transform 1.4s var(--hx-ease); }
.hx-poster:hover .hx-poster-media .hx-img { transform: scale(1.06); }
.hx-poster-media .hx-tag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.hx-poster-cap { display: flex; flex-direction: column; gap: 5px; }
.hx-poster-meta { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-mute); }
.hx-poster-t { font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.hx-poster.is-lead .hx-poster-t { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.hx-poster-promo { font-size: .84rem; color: var(--hx-req); font-weight: 600; }
.hx-poster-p { font-size: .84rem; color: var(--hx-sub); }
.hx-poster-p b { color: var(--hx-ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hx-coll.is-rail .hx-posters { grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 24%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.hx-coll.is-rail .hx-poster { scroll-snap-align: start; }

/* ==========================================================================
   DEPARTURES — timeline
   ========================================================================== */
.hx-timeline { list-style: none; margin: 0; padding: 18px 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 0; overflow-x: auto; scrollbar-width: none; position: relative; }
.hx-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 104px; height: 1px; background: var(--hx-line); }
.hx-dep a { display: flex; flex-direction: column; gap: 10px; padding: 0 22px 8px 0; text-decoration: none; color: var(--hx-ink); }
.hx-dep-date { display: flex; align-items: flex-end; gap: 10px; }
.hx-dep-date b { font-size: 4.2rem; font-weight: 800; line-height: .8; letter-spacing: -.06em; }
.hx-dep-date span { display: flex; flex-direction: column; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--tp); }
.hx-dep-date small { color: var(--hx-mute); font-size: .66rem; letter-spacing: .06em; text-transform: none; font-weight: 600; }
.hx-dep-dot { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--tp); margin: 10px 0 6px; transition: transform .4s var(--hx-ease); }
.hx-dep a:hover .hx-dep-dot { transform: scale(1.4); }
.hx-dep-t { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.2; }
.hx-dep-m { font-size: .8rem; color: var(--hx-sub); }
.hx-seats { display: flex; flex-direction: column; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--hx-ok); }
.hx-seats.is-low { color: #e11d48; }
.hx-seats-bar { height: 4px; border-radius: 4px; background: var(--hx-line); overflow: hidden; max-width: 180px; }
.hx-seats-bar i { display: block; height: 100%; background: currentColor; border-radius: 4px; }

/* ==========================================================================
   OFFERS — tickets
   ========================================================================== */
.hx-offer-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hx-offer { position: relative; display: grid; grid-template-columns: 1fr 22px 158px; min-height: 150px; border-radius: 22px; background: linear-gradient(135deg, #fff 0%, #fbf7ef 100%); border: 1px solid var(--hx-line); overflow: hidden; }
.hx-offer-l { padding: 22px 8px 20px 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hx-offer-k { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tp); }
.hx-offer-v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.hx-offer-s { font-size: .82rem; color: var(--hx-sub); }
.hx-offer-end { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #e11d48; }
.hx-offer-perf { position: relative; background: repeating-linear-gradient(180deg, transparent 0 8px, var(--hx-line) 8px 14px) center / 2px 100% no-repeat; }
.hx-offer-perf::before, .hx-offer-perf::after { content: ""; position: absolute; left: 1px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--hx-line); }
.hx-offer-perf::before { top: -11px; } .hx-offer-perf::after { bottom: -11px; }
.hx-offer-r { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 16px 14px; text-align: center; }
.hx-offer-r small { font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-mute); }
.hx-code { position: relative; border: 1.5px dashed var(--tp); background: color-mix(in srgb, var(--tp) 6%, #fff); color: var(--tp); font-weight: 800; letter-spacing: .05em; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: .8rem; max-width: 100%; }
.hx-code em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; background: var(--hx-ok); color: #fff; border-radius: 8px; opacity: 0; transition: opacity .2s; }
.hx-code.is-copied em { opacity: 1; }
.hx-offer-cta { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 800; color: var(--hx-ink); text-decoration: none; }
.hx-offer-banner { display: block; grid-template-columns: none; padding: 0; background: #0a1428; min-height: 150px; }
.hx-offer-banner .hx-img { position: absolute; inset: 0; }
.hx-offer-bcap { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--hx-ink); font-weight: 700; font-size: .82rem; }

/* ==========================================================================
   STORIES — quote stage
   ========================================================================== */
.hx-stories { background: var(--hx-paper); }
.hx-quotes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hx-quote-stage { position: relative; min-height: 300px; }
.hx-qmark { position: absolute; top: -70px; left: -10px; font-size: 12rem; line-height: 1; color: var(--tp); opacity: .14; font-family: Georgia, serif; pointer-events: none; }
.hx-quote { position: absolute; inset: 0 0 auto 0; margin: 0; opacity: 0; visibility: hidden; transform: translate3d(0, 20px, 0); transition: opacity .8s ease, transform 1s var(--hx-ease), visibility 0s .8s; }
.hx-quote.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .8s ease .1s, transform 1s var(--hx-ease) .1s, visibility 0s; }
.hx-stars { color: #f0a92e; letter-spacing: 3px; font-size: 1rem; }
.hx-stars span { color: rgba(10,20,40,.15); }
.hx-quote-h { margin: 14px 0 0; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.hx-quote blockquote { margin: 12px 0 0; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.35; letter-spacing: -.02em; font-weight: 600; color: var(--hx-ink); text-wrap: pretty; }
.hx-quote figcaption { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.hx-quote figcaption b { font-size: 1rem; }
.hx-quote figcaption span { font-size: .86rem; color: var(--hx-sub); }
.hx-quote figcaption a { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--tp); text-decoration: none; }
.hx-quote-idx { display: flex; flex-direction: column; gap: 8px; }
.hx-qi { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 4px 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: background .35s, border-color .35s; }
.hx-qi:hover { background: rgba(255,255,255,.6); }
.hx-qi.is-on { background: #fff; border-color: var(--hx-line); box-shadow: 0 20px 40px -32px rgba(10,20,40,.5); }
.hx-qi-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tp), color-mix(in srgb, var(--tp) 45%, #0a1428)); grid-row: span 2; }
.hx-qi-t { display: flex; flex-direction: column; line-height: 1.25; }
.hx-qi-t b { font-size: .92rem; color: var(--hx-ink); }
.hx-qi-t small { font-size: .76rem; color: var(--hx-mute); }
.hx-qi-bar { height: 2px; border-radius: 2px; background: var(--hx-line); overflow: hidden; }
.hx-qi-bar i { display: block; height: 100%; background: var(--tp); transform: scaleX(0); transform-origin: 0 50%; }
.hx-qi.is-on .hx-qi-bar i { animation: hxBar 7s linear forwards; }
.hx-quotes.is-paused .hx-qi.is-on .hx-qi-bar i { animation-play-state: paused; }

/* ==========================================================================
   WHY — promise band
   ========================================================================== */
.hx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1px solid var(--hx-line); border-bottom: 1px solid var(--hx-line); margin-bottom: 44px; }
.hx-stat { display: flex; flex-direction: column; gap: 6px; padding: 30px 24px; border-left: 1px solid var(--hx-line); }
.hx-stat:first-child { border-left: 0; padding-left: 0; }
.hx-stat b { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.hx-stat span { font-size: .84rem; font-weight: 600; color: var(--hx-sub); }
.hx-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.hx-point { display: flex; flex-direction: column; gap: 10px; }
.hx-point-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--tp); border: 1px solid var(--hx-line); }
.hx-point h3 { margin: 6px 0 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.hx-point p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--hx-sub); }

/* ==========================================================================
   JOURNAL
   ========================================================================== */
.hx-jgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; }
.hx-jlead { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--hx-ink); }
.hx-jlead:hover { color: var(--hx-ink); }
.hx-jmedia { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #0a1428; }
.hx-jmedia .hx-img { position: absolute; inset: 0; transition: transform 1.4s var(--hx-ease); }
.hx-jlead:hover .hx-jmedia .hx-img { transform: scale(1.05); }
.hx-jmeta { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tp); }
.hx-jt { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.hx-jt-sm { font-size: 1.08rem; margin-top: 4px; }
.hx-jx { color: var(--hx-sub); font-size: .95rem; line-height: 1.55; }
.hx-jlist { display: flex; flex-direction: column; gap: 6px; }
.hx-jrow { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 18px; padding: 12px; border-radius: 18px; text-decoration: none; color: var(--hx-ink); transition: background .3s; }
.hx-jrow:hover { background: var(--hx-paper); color: var(--hx-ink); }
.hx-jthumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #0a1428; }
.hx-jthumb .hx-img { position: absolute; inset: 0; }

/* ==========================================================================
   FINALE
   ========================================================================== */
.hx-finale { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 12vw, 170px) 0; color: #fff; background: #05080f; }
.hx-finale-media { position: absolute; inset: 0; z-index: -1; }
.hx-finale-media picture, .hx-finale-media .hx-img, .hx-finale-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-finale-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,8,18,.9) 0%, rgba(4,8,18,.66) 50%, rgba(4,8,18,.4) 100%); }
.hx-finale-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hx-finale .hx-eyebrow { color: #f6dfaa; }
.hx-finale-t { margin: 16px 0 0; font-size: clamp(2.4rem, 5.4vw, 4.8rem); line-height: .95; letter-spacing: -.05em; font-weight: 800; color: #fff; text-wrap: balance; }
.hx-finale-s { margin: 22px 0 0; font-size: 1.12rem; line-height: 1.55; color: rgba(255,255,255,.76); max-width: 48ch; }
.hx-finale-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hx-finale-quick a { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); color: #fff; text-decoration: none; font-weight: 600; transition: background .3s; }
.hx-finale-quick a:hover { background: rgba(255,255,255,.12); color: #fff; }
.hx-finale-form { padding: 30px; border-radius: 26px; background: rgba(8,12,24,.52); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.hx-finale-form form { display: flex; flex-direction: column; gap: 14px; }
.hx-fld { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.hx-fld span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hx-fld input { height: 54px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; padding: 0 16px; font: inherit; font-size: 1rem; transition: border-color .25s, background .25s; }
.hx-fld input::placeholder { color: rgba(255,255,255,.4); }
.hx-fld input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.1); }
.hx-finale-note { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.5); font-size: .76rem; }
.hx-finale-ok { display: flex; align-items: center; gap: 14px; color: #6ee7b7; }
.hx-finale-ok div { display: flex; flex-direction: column; color: #fff; }
.hx-finale-ok span { color: rgba(255,255,255,.7); font-size: .9rem; }

/* finale sits flush on the footer */
body:has(#hx > .hx-finale:last-of-type) .site-footer { margin-top: 0; }

/* phone-only UI (styled in home-m.css); inert on tablet/desktop */
.hx-m-search, .hx-sheet-head, .hx-sheet-bd, .hx-chapnav, .hx-fab, .hx-m-prog { display: none; }
.hx-anchor { display: block; height: 0; }

/* ==========================================================================
   SCROLL NARRATIVE — reveal presets (home.js toggles .is-in)
   ========================================================================== */
.hx-js .hx-rv { transition: opacity .9s ease, transform 1.1s var(--hx-ease), clip-path 1.2s var(--hx-ease); transition-delay: calc(var(--rd, 0) * 90ms + var(--bd, 0ms)); }
.hx-js [data-anim="rise"] .hx-rv:not(.is-in) { opacity: 0; transform: translate3d(0, 46px, 0); }
.hx-js [data-anim="fade"] .hx-rv:not(.is-in) { opacity: 0; }
/* never fully clip the observed element: IntersectionObserver honours clip-path, so a 100% clip would never intersect */
.hx-js [data-anim="mask"] .hx-rv:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); clip-path: inset(0 0 55% 0); }
.hx-js [data-anim="mask"] .hx-rv.is-in { clip-path: inset(0 0 0 0); }
.hx-js .hx-rv.is-done { transition-delay: 0ms; }
/* category-specific entrances layered on top of the preset */
.hx-js [data-anim]:not([data-anim="none"]) .hx-lead:not(.is-in) .hx-lead-media { clip-path: inset(0 100% 0 0 round 28px); }
.hx-js .hx-lead .hx-lead-media { clip-path: inset(0 0 0 0 round 28px); transition: clip-path 1.5s var(--hx-ease) .1s; }
.hx-js [data-anim]:not([data-anim="none"]) .hx-sidecard:not(.is-in) { transform: translate3d(80px, 30px, 0) scale(.96); }
.hx-js [data-anim]:not([data-anim="none"]) .hx-atlas-p:not(.is-in) { transform: translate3d(0, 60px, 0) scaleY(.92); transform-origin: 50% 100%; }
.hx-js [data-anim]:not([data-anim="none"]) .hx-mode:not(.is-in) { transform: translate3d(-40px, 0, 0); }
.hx-js [data-anim]:not([data-anim="none"]) .hx-veh:not(.is-in) { transform: translate3d(60px, 0, 0); }
.hx-js [data-anim]:not([data-anim="none"]) .hx-ticket:not(.is-in) { transform: translate3d(0, 30px, 0) rotate(-1.5deg); }

/* ==========================================================================
   RESPONSIVE — each breakpoint designed, not squeezed
   ========================================================================== */
@media (max-width: 1199.98px) {
  .hx-hero-in { grid-template-columns: minmax(0, 1fr) 270px; }
  .hx-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-mode { min-height: 200px; }
  .hx-tickets, .hx-offer-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-poster.is-lead { grid-column: span 3; grid-row: auto; }
  .hx-poster.is-lead .hx-poster-media { min-height: 0; aspect-ratio: 16 / 8; }
}
@media (max-width: 991.98px) {
  .hx-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hx-hero-in { grid-template-columns: 1fr; gap: 26px; padding-bottom: 188px; }
  .hx-reel { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 18px; }
  .hx-reel-i { flex: 0 0 200px; }
  .hx-spread { grid-template-columns: 1fr; }
  .hx-lead { padding-bottom: 0; }
  .hx-slab { position: relative; left: auto; right: auto; margin: -80px 18px 0; }
  .hx-side { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 2px 12px; }
  .hx-side::-webkit-scrollbar { display: none; }
  .hx-sidecard { flex: 0 0 min(560px, 86%); scroll-snap-align: start; }
  .hx-sidecard.is-offset { margin: 0; }
  .hx-atlas-deck { height: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 62%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; padding-bottom: 8px; contain: none; }
  .hx-atlas-deck::-webkit-scrollbar { display: none; }
  .hx-atlas-p { aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .hx-atlas-p .hx-atlas-info { opacity: 1; transform: none; min-width: 0; padding: 24px; gap: 8px; }
  .hx-atlas-p .hx-atlas-spine { display: none; }
  .hx-atlas-media .hx-img { filter: none; transform: scale(1.02); }
  .hx-atlas-name { font-size: 2.3rem; }
  .hx-atlas-desc { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hx-move-top { flex-direction: column; align-items: flex-start; }
  .hx-fleet { grid-template-columns: 1fr; }
  .hx-quotes { grid-template-columns: 1fr; }
  .hx-quote-idx { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .hx-qi { flex: 0 0 220px; }
  .hx-jgrid, .hx-finale-in { grid-template-columns: 1fr; }
}
/* phones: see assets/home-m.css (mobile-native composition, loaded only ≤767px) */

/* ==========================================================================
   Reduced motion — static, fully visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .hx-js .hx-rv { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hx-slide.is-on .hx-slide-media { animation: none; }
  .hx-copy.is-on .hx-h .w > span, .hx-copy.is-on .hx-kicker, .hx-copy.is-on .hx-lede, .hx-copy.is-on .hx-actions, .hx-copy.is-on .hx-promo { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- section background media (Section Manager upload) ---------- */
.has-bgm { position: relative; isolation: isolate; }
.hx-bgm { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hx-bgm picture, .hx-bgm .hx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-bgm::after { content: ""; position: absolute; inset: 0; background: #fbfaf7; opacity: var(--bgdim, .82); }
.hx-t-dark .hx-bgm::after, .hx-stays .hx-bgm::after { background: #07090f; }
.hx-t-tint .hx-bgm::after { background: var(--hx-paper); }
.has-bgm.hx-journeys, .has-bgm.hx-atlas, .has-bgm.hx-move, .has-bgm.hx-stories { background: transparent; }
/* uploaded media inside items */
.hx-qi-av { overflow: hidden; }
.hx-qi-av img, .hx-quote-av img, .hx-ticket-img img, .hx-offer-img img, .hx-point-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-quote-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(10,20,40,.4); }
.hx-ticket-img { display: block; height: 86px; margin: -22px -22px 0 -22px; border-radius: 22px 0 0 0; overflow: hidden; }
.hx-offer-img { display: block; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.hx-point-ic.has-img { overflow: hidden; padding: 0; }