/* ═══════════════════════════════════════════════════════════════
   escapes.asia — Public Itinerary (mobile-first)
   Source of truth for tokens & components on the customer-facing
   itinerary detail page. Mirrors the design-system skill at
   .claude/skills/escapes-asia-design.
   Scope: .esc-itin (wraps show.html.erb)
   ═══════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* Brand */
  --escape-green: #00a24f;
  --escape-green-deep: #008440;
  --escape-green-soft: #e6f4ec;
  --royal-blue: #0057a8;
  --royal-blue-deep: #00468a;
  --royal-blue-soft: #e6eef6;
  --accent-red: #ed1c24;
  --accent-red-deep: #c8141b;
  --accent-red-soft: #fde7e8;
  --star-yellow: #ffc107;
  /* Neutrals */
  --bg-page: #f9f9f9;
  --bg-page-cool: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-quiet: #f7f8f9;
  --bg-muted-band: #d0d5dd;
  --fg-ink: #0d0f11;
  --fg-1: #1e1e1e;
  --fg-2: #323a46;
  --fg-3: #64748b;
  --fg-4: #767e86;
  --border-strong: #a0abbb;
  --border: #b8c0cc;
  --border-soft: #d9d9d9;
  --border-quiet: #f1f5f9;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14);
  /* Radii */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-2xl: 30px;
  --radius-pill: 9999px;
  /* Type families */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Easing */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-base: 220ms;
}

/* ── Root scope ──────────────────────────────────────────── */
.esc-itin {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0, 87, 168, 0.06), transparent 55%),
    linear-gradient(180deg, #eef3f9 0%, #f3f6fa 28%, #f3f6fa 100%);
  color: var(--fg-ink);
  font-family: var(--font-ui);
  min-height: 100vh;
  padding-bottom: 96px;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .esc-itin { padding-bottom: 32px; }
}
.esc-itin * { box-sizing: border-box; }
.esc-itin img { display: block; max-width: 100%; height: auto; }

/* ── Layout container ────────────────────────────────────── */
.esc-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .esc-shell { padding: 0 24px; } }
@media (min-width: 1024px) { .esc-shell { padding: 0 40px; } }

.esc-stack > * + * { margin-top: 28px; }
@media (min-width: 768px) { .esc-stack > * + * { margin-top: 40px; } }

/* ── Section card ────────────────────────────────────────── */
.esc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 20px;
}
@media (min-width: 640px) { .esc-card { padding: 28px; } }
@media (min-width: 1024px) { .esc-card { padding: 32px; } }

/* ── Section label / heading ─────────────────────────────── */
.esc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin: 0 0 10px;
}
.esc-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-red), rgba(237, 28, 36, 0));
}
.esc-eyebrow--blue { color: var(--royal-blue); }
.esc-eyebrow--blue::before { background: linear-gradient(90deg, var(--royal-blue), rgba(0, 87, 168, 0)); }
.esc-eyebrow--green { color: var(--escape-green-deep); }
.esc-eyebrow--green::before { background: linear-gradient(90deg, var(--escape-green), rgba(0, 162, 79, 0)); }

.esc-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-ink);
  margin: 0;
  text-wrap: balance;
}
.esc-title .g { color: var(--escape-green); }
.esc-title .b { color: var(--royal-blue); }

.esc-prose, .esc-prose p { font-size: 15px; line-height: 1.65; color: #374151; }
@media (min-width: 768px) { .esc-prose, .esc-prose p { font-size: 16px; } }
.esc-prose strong { color: var(--fg-ink); }
/* Classic day description — render the operator's rich text faithfully:
   paragraph + line-break spacing and real list markers, no shredding.
   ActionText wraps the body in .trix-content and zeroes every child margin
   (.trix-content *), so these rules restore block spacing + list markers,
   scoped to the day description. */
.esc-day__prose { font-size: 15px; line-height: 1.7; color: #374151; }
@media (min-width: 768px) { .esc-day__prose { font-size: 16px; } }
.esc-day__prose .trix-content > div, .esc-day__prose .trix-content > p { margin: 0 0 0.7em; }
.esc-day__prose .trix-content > *:last-child { margin-bottom: 0; }
.esc-day__prose .trix-content ul, .esc-day__prose .trix-content ol { margin: 0.5em 0; padding-left: 1.4em; }
.esc-day__prose .trix-content ul { list-style: disc; }
.esc-day__prose .trix-content ol { list-style: decimal; }
.esc-day__prose .trix-content li { margin: 0.25em 0; }
.esc-day__prose .trix-content strong { color: var(--fg-ink); font-weight: 700; }
.esc-day__prose .trix-content a { color: var(--royal-blue); text-decoration: underline; }

/* ═══════════ HERO ═══════════ */
.esc-hero {
  position: relative;
  min-height: 460px;
  height: clamp(460px, 70svh, 720px);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(145deg, var(--royal-blue) 0%, #003566 48%, #001f3d 100%);
}
.esc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.esc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(195deg, rgba(0, 20, 40, 0.18) 0%, rgba(0, 0, 0, 0.28) 38%, rgba(0, 0, 0, 0.85) 100%),
    radial-gradient(ellipse 90% 75% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(120deg, rgba(0, 87, 168, 0.35) 0%, transparent 42%, rgba(237, 28, 36, 0.12) 100%);
}
.esc-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px 72px;
}
@media (min-width: 640px) { .esc-hero__body { padding: 32px 24px 96px; } }
@media (min-width: 1024px) { .esc-hero__body { padding: 56px 40px 120px; } }

.esc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 14px;
}
.esc-hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-red), rgba(255, 255, 255, 0.5));
}
.esc-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 7vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
  color: #fff;
}
.esc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 640px) { .esc-hero__meta { font-size: 14px; } }
.esc-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.esc-hero__meta svg { width: 14px; height: 14px; }
.esc-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: inline-block;
}

/* ═══════════ PRICE DOCK (glass) ═══════════ */
.esc-pricedock-wrap {
  position: relative;
  z-index: 10;
  max-width: 1120px;
  margin: -48px auto 0;
  padding: 0 16px;
}
@media (min-width: 640px) { .esc-pricedock-wrap { padding: 0 24px; margin-top: -56px; } }
@media (min-width: 1024px) { .esc-pricedock-wrap { padding: 0 40px; margin-top: -72px; } }

.esc-pricedock {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 48px rgba(15, 23, 42, 0.14);
  padding: 20px;
}
@media (min-width: 640px) { .esc-pricedock { padding: 26px; } }

.esc-pricedock__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 900px) {
  .esc-pricedock__main { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
.esc-price__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--royal-blue);
  margin: 0 0 6px;
}
.esc-price__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1;
  color: var(--fg-ink);
  margin: 0;
  letter-spacing: -0.02em;
}
.esc-price__value .from {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
  margin-right: 6px;
  letter-spacing: 0;
}
.esc-price__value .gst {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  margin-left: 6px;
  letter-spacing: 0;
}
.esc-price__value .rupee { color: var(--escape-green); font-family: var(--font-ui); font-weight: 800; }

.esc-pricedock__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
@media (min-width: 480px) { .esc-pricedock__cta { flex-direction: row; } }
@media (min-width: 900px) { .esc-pricedock__cta { width: auto; } }

/* ── Buttons ─────────────────────────────────────────────── */
.esc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
  flex: 1;
}
@media (min-width: 480px) { .esc-btn { flex: 0 1 auto; } }
.esc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.esc-btn--red {
  background: var(--accent-red);
  color: #fff;
}
.esc-btn--red:hover { background: var(--accent-red-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(237, 28, 36, 0.3); }
.esc-btn--whatsapp { background: #25D366; color: #fff; }
.esc-btn--whatsapp:hover { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.32); }
.esc-btn--outline {
  background: transparent;
  color: var(--fg-ink);
  border: 1.5px solid var(--fg-ink);
}
.esc-btn--outline:hover { background: var(--fg-ink); color: #fff; }
.esc-btn--ghost { background: var(--bg-card-quiet); color: var(--fg-1); }
.esc-btn--ghost:hover { background: #eef1f5; }

/* ── Price tiers ─────────────────────────────────────────── */
.esc-tiers {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-quiet);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .esc-tiers { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.esc-tier {
  background: var(--bg-card-quiet);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-md);
  padding: 16px;
}
.esc-tier__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--royal-blue);
  margin: 0 0 6px;
}
.esc-tier__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--fg-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.esc-tier__value .rupee { color: var(--escape-green); font-family: var(--font-ui); font-weight: 800; }
.esc-tier__value .gst { font-size: 11px; font-family: var(--font-ui); color: var(--fg-3); margin-left: 4px; }
.esc-tier__meta { font-size: 12px; color: var(--fg-3); margin: 4px 0 0; }

/* ═══════════ QUICK ITINERARY ═══════════ */
.esc-quick { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .esc-quick { padding: 28px; } }
.esc-quick__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
@media (min-width: 640px) { .esc-quick__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.esc-quick__cell { display: flex; gap: 12px; align-items: flex-start; }
.esc-quick__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--royal-blue-soft);
  color: var(--royal-blue);
}
.esc-quick__icon svg { width: 18px; height: 18px; stroke-width: 2; }
.esc-quick__cell:nth-child(2) .esc-quick__icon { background: #FEF3C7; color: #92400E; }
.esc-quick__cell:nth-child(3) .esc-quick__icon { background: var(--escape-green-soft); color: var(--escape-green-deep); }
.esc-quick__caption {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 4px;
}
.esc-quick__value { font-size: 14px; font-weight: 600; color: var(--fg-ink); margin: 0; line-height: 1.4; }
/* Stacked stays (one hotel per line) get a clear gap so each is scannable. */
.esc-quick__value--stacked + .esc-quick__value--stacked { margin-top: 8px; }

/* ═══════════ DAYS (chapter cards) ═══════════ */
.esc-days__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 4px;
}
.esc-days__count {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.esc-day {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 18px;
}
.esc-day__header {
  position: relative;
  padding: 20px;
  border-bottom: 1px solid var(--border-quiet);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(0, 87, 168, 0.05), transparent 60%),
    var(--bg-card);
}
@media (min-width: 640px) { .esc-day__header { padding: 24px 28px; } }
.esc-day__dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin: 0 0 10px;
}
.esc-day__dateline .place { color: var(--royal-blue); }
.esc-day__dateline .dot {
  width: 3px; height: 3px; border-radius: 50%; background: rgba(13, 15, 17, 0.35);
}
.esc-day__title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.esc-day__num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(46px, 11vw, 72px);
  line-height: 0.85;
  color: var(--royal-blue);
  opacity: 0.92;
  letter-spacing: -0.02em;
}
.esc-day__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-ink);
  margin: 6px 0 0;
  text-wrap: balance;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.esc-day__body { padding: 20px; }
@media (min-width: 640px) { .esc-day__body { padding: 24px 28px 28px; } }
.esc-day__body > * + * { margin-top: 18px; }

.esc-day__opener {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.5;
  color: #1f2937;
  padding-left: 16px;
  border-left: 3px solid var(--accent-red);
  margin: 0;
}

.esc-day__minis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 560px) { .esc-day__minis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

.esc-mini {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.esc-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.esc-mini__head { display: flex; align-items: center; gap: 8px; }
.esc-mini__icon {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.esc-mini__icon svg { width: 14px; height: 14px; stroke-width: 2; }
.esc-mini__label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.esc-mini__name { font-weight: 700; font-size: 14px; color: var(--fg-ink); margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.esc-mini__meta { font-size: 12px; color: var(--fg-3); margin: 2px 0 0; line-height: 1.4; }
.esc-mini__desc { font-size: 12px; color: var(--fg-2); margin: 6px 0 0; line-height: 1.45; white-space: pre-line; }

.esc-mini--hotel .esc-mini__icon { background: #FEF3C7; color: #92400E; }
.esc-mini--hotel .esc-mini__label { color: #92400E; }
.esc-mini--hotel:hover { border-color: #fcd34d; }
.esc-mini--transfer .esc-mini__icon { background: var(--royal-blue-soft); color: var(--royal-blue-deep); }
.esc-mini--transfer .esc-mini__label { color: var(--royal-blue); }
.esc-mini--transfer:hover { border-color: #bfdbfe; }
.esc-mini--act .esc-mini__icon { background: var(--escape-green-soft); color: var(--escape-green-deep); }
.esc-mini--act .esc-mini__label { color: var(--escape-green-deep); }
.esc-mini--act:hover { border-color: #86efac; }

.esc-day__stay {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-3);
  padding-top: 14px;
  border-top: 1px solid var(--border-quiet);
  margin: 0;
}
.esc-day__stay strong { color: var(--royal-blue); font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-right: 6px; }

.esc-day__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 640px) { .esc-day__gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
.esc-day__gallery > * {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-card-quiet);
}
.esc-day__gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════ INCLUSIONS / EXCLUSIONS ═══════════ */
.esc-inex { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .esc-inex { padding: 28px; } }
.esc-inex__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.esc-inex__badge {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.esc-inex__badge svg { width: 20px; height: 20px; stroke-width: 2; }
.esc-inex__badge--in { background: var(--escape-green-soft); color: var(--escape-green-deep); }
.esc-inex__badge--ex { background: var(--accent-red-soft); color: var(--accent-red); }

.esc-inex__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.1;
  color: var(--fg-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.esc-inex__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) { .esc-inex__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.esc-inex__group {
  border: 1px solid var(--border-soft);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--bg-card-quiet);
}
.esc-inex__group--in { border-left-color: var(--escape-green); }
.esc-inex__group--ex { border-left-color: var(--accent-red); }
.esc-inex__group h4 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.esc-inex__group--in h4 { color: var(--escape-green-deep); }
.esc-inex__group--ex h4 { color: var(--accent-red-deep); }
.esc-inex__group ul { margin: 0; padding: 0; list-style: none; }
.esc-inex__group li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
}
.esc-inex__group--in li::before {
  content: "✓";
  position: absolute; left: 0; top: 4px;
  color: var(--escape-green); font-weight: 700;
}
.esc-inex__group--ex li::before {
  content: "×";
  position: absolute; left: 0; top: 2px;
  color: var(--accent-red); font-weight: 700; font-size: 18px;
}

/* ═══════════ GALLERY ═══════════ */
.esc-gallery { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .esc-gallery { padding: 28px; } }
.esc-gallery__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.esc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 640px) { .esc-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 900px) { .esc-gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.esc-gallery__cell {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-card-quiet);
}
.esc-gallery__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.esc-gallery__cell:hover img { transform: scale(1.04); }
.esc-gallery__cell--button {
  appearance: none; border: 0; padding: 0; cursor: zoom-in; position: relative;
  background: var(--bg-card-quiet); border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 1 / 1;
}
.esc-gallery__cell--button:focus-visible { outline: 3px solid #0057a8; outline-offset: 2px; }
.esc-gallery__zoom {
  position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 9999px;
  background: rgba(0,0,0,0.55); color: #fff; opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.esc-gallery__zoom svg { width: 16px; height: 16px; }
.esc-gallery__cell--button:hover .esc-gallery__zoom,
.esc-gallery__cell--button:focus-visible .esc-gallery__zoom { opacity: 1; }

/* ═══════════ LIGHTBOX ═══════════ */
.esc-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 26, 0.92); padding: 24px;
}
.esc-lightbox img {
  max-width: min(94vw, 1400px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  background: #000;
}
.esc-lightbox__close,
.esc-lightbox__nav {
  position: absolute; appearance: none; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff;
  width: 48px; height: 48px; border-radius: 9999px;
  display: grid; place-items: center;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.esc-lightbox__close { top: 24px; right: 24px; }
.esc-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.esc-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.esc-lightbox__close:hover,
.esc-lightbox__nav:hover { background: rgba(255,255,255,0.24); }
.esc-lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
.esc-lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }
.esc-lightbox__close svg,
.esc-lightbox__nav svg { width: 22px; height: 22px; }
.esc-lightbox__counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #fff; font-family: var(--font-sans, sans-serif); font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85;
}
@media (max-width: 640px) {
  .esc-lightbox__close,
  .esc-lightbox__nav { width: 40px; height: 40px; }
  .esc-lightbox__close { top: 12px; right: 12px; }
  .esc-lightbox__nav--prev { left: 8px; }
  .esc-lightbox__nav--next { right: 8px; }
}

/* ═══════════ POLICIES ═══════════ */
/* Policy cards stack one per row at every width. Side-by-side, a 3-row
   Cancellation table beside a 4-row Payment one either left a dead white
   void under the shorter card or forced airy rows to fill it — neither
   read as clean. Full-width rows give each table its own line, natural
   height, and the full container width (so long charge text never clips). */
.esc-policies {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .esc-policies { gap: 20px; } }
.esc-policy { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .esc-policy { padding: 26px; } }
.esc-policy--full { grid-column: 1 / -1; }
.esc-policy__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--royal-blue);
  margin: 0 0 12px;
}
.esc-policy__body { font-size: 14.5px; line-height: 1.6; color: #374151; }
.esc-policy__body p { margin: 0 0 10px; }
.esc-policy__body p:last-child { margin-bottom: 0; }

/* Terms & Conditions as a clean bulleted list */
.esc-terms-list { list-style: none; padding: 0; margin: 0; }
.esc-terms-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px; line-height: 1.55; color: #334155;
}
.esc-terms-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.esc-terms-list li::before {
  content: ""; position: absolute; left: 4px; top: 14px;
  width: 8px; height: 8px; border-radius: 9999px;
  background: #0057a8;
  box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.12);
}
.esc-terms-list li strong { color: #0f172a; font-weight: 700; }
.esc-policy__body ul, .esc-policy__body ol { padding-left: 20px; margin: 0 0 10px; }
.esc-policy__body li { margin-bottom: 4px; }

.esc-policy__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ═══════════ REGIONAL T&C SUMMARY (one-pager inline + deep-link
   to /terms/:slug). Replaces the immature collapsible inline T&C. ═══ */
.esc-terms-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-md);
  margin-top: 18px;
}
@media (min-width: 640px) { .esc-terms-summary { padding: 28px; } }
.esc-terms-summary__head { margin-bottom: 14px; }
.esc-terms-summary__eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--royal-blue); margin: 0 0 4px;
}
.esc-terms-summary__title {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.2; color: #0f172a; margin: 0;
}
.esc-terms-summary__body { font-size: 13.5px; line-height: 1.6; color: #374151; }
.esc-terms-summary__body h1, .esc-terms-summary__body h2, .esc-terms-summary__body h3 { color: #0057a8; font-size: 15px; margin: 14px 0 6px; }
.esc-terms-summary__body p { margin: 4px 0 8px; }
.esc-terms-summary__body ul, .esc-terms-summary__body ol { padding-left: 20px; }
.esc-terms-summary__body li { margin-bottom: 3px; }
.esc-terms-summary__cta { margin: 16px 0 0; }
.esc-terms-summary__link {
  color: var(--royal-blue); font-weight: 600; text-decoration: none;
  font-size: 13.5px; border-bottom: 1px solid currentColor;
}
.esc-terms-summary__link:hover { color: var(--escape-green); }
.esc-policy__toggle::-webkit-details-marker { display: none; }
.esc-policy__toggle svg { width: 16px; height: 16px; color: var(--fg-3); transition: transform var(--dur-base) var(--ease-out); }
details[open] .esc-policy__toggle svg { transform: rotate(180deg); }
details .esc-policy__body { margin-top: 14px; }

/* ═══════════ CONTACT BAND ═══════════ */
.esc-contact {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  padding: 28px 20px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(237, 28, 36, 0.22), transparent 52%),
    radial-gradient(90% 70% at 100% 30%, rgba(0, 162, 79, 0.18), transparent 50%),
    linear-gradient(168deg, #023e6f 0%, var(--royal-blue) 38%, #003d66 100%);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { .esc-contact { padding: 36px 32px; } }
@media (min-width: 900px) { .esc-contact { padding: 48px; } }
.esc-contact__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}
.esc-contact__glow--a { width: 320px; height: 220px; top: -100px; right: -60px; background: rgba(237, 28, 36, 0.35); }
.esc-contact__glow--b { width: 280px; height: 200px; bottom: -120px; left: -40px; background: rgba(0, 162, 79, 0.32); }

.esc-contact__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) { .esc-contact__inner { grid-template-columns: 1fr auto; gap: 40px; } }

.esc-contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 12px;
}
.esc-contact__eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--accent-red), rgba(255, 255, 255, 0.5));
}
.esc-contact__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.esc-contact__lede { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin: 0 0 20px; max-width: 36rem; }
.esc-contact__channels { display: flex; flex-wrap: wrap; gap: 10px; }
.esc-contact__channel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
  backdrop-filter: blur(12px);
}
.esc-contact__channel:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.esc-contact__channel--wa { background: #25D366; border-color: #25D366; }
.esc-contact__channel--wa:hover { background: #1ebe5d; }
.esc-contact__channel svg { width: 16px; height: 16px; }
.esc-contact__aside {
  display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 900px) { .esc-contact__aside { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, 0.18); align-items: flex-start; } }
.esc-contact__social-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 6px;
}
.esc-contact__social {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  color: #fff;
  font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.esc-contact__social:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.esc-contact__social svg { width: 18px; height: 18px; }

/* ═══════════ STICKY FOOTER (mobile pill) ═══════════ */
.esc-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.esc-stickybar__inner {
  pointer-events: auto;
  margin: 0 auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  padding: 8px 10px 8px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 14px 40px rgba(15, 23, 42, 0.18);
}
.esc-stickybar__info {
  display: none;
  flex-direction: column;
  min-width: 0;
}
@media (min-width: 640px) { .esc-stickybar__info { display: flex; } }
.esc-stickybar__label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.esc-stickybar__value {
  font-size: 14px; font-weight: 700; color: var(--fg-ink);
  text-decoration: none;
}
.esc-stickybar__value:hover { color: var(--escape-green-deep); }
.esc-stickybar__actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.esc-stickybar .esc-btn { padding: 11px 18px; font-size: 13px; flex: 0 0 auto; }
.esc-stickybar__call {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bg-card-quiet);
  color: var(--fg-ink);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}
.esc-stickybar__call:hover { background: var(--fg-ink); color: #fff; border-color: var(--fg-ink); }
.esc-stickybar__call svg { width: 16px; height: 16px; }
@media (min-width: 640px) { .esc-stickybar__call { display: none; } }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .esc-mini, .esc-btn, .esc-contact__channel, .esc-stickybar__call, .esc-gallery__cell img { transition: none !important; }
  .esc-mini:hover, .esc-btn:hover, .esc-contact__channel:hover, .esc-gallery__cell:hover img { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   LUXURY parallax variant — chapter-by-chapter storytelling
   Scope: .lux-root (wraps show.html.erb when layout_style=luxury)
   Source: ui_kits/customer/itinerary.css in escapes-asia-design skill
   ═══════════════════════════════════════════════════════════════ */

.lux-root {
  background: linear-gradient(180deg, #eef3f9 0%, #f3f6fa 28%, #f3f6fa 100%);
  color: var(--fg-ink);
  font-family: var(--font-ui);
  overflow-x: hidden;
  padding-bottom: 96px;
}
@media (min-width: 760px) { .lux-root { padding-bottom: 0; } }

/* ── Hero ──────────────────────────────────────────────── */
.lux-hero {
  position: relative;
  min-height: min(100svh, 920px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  color: #fff;
}
.lux-hero__img {
  position: absolute; inset: -12% -4% 0 -4%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--bg-card-quiet);
  z-index: 0; will-change: transform;
}
.lux-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(195deg, rgba(0,20,40,0.15) 0%, rgba(0,0,0,0.28) 38%, rgba(0,0,0,0.82) 100%),
    radial-gradient(ellipse 90% 75% at 50% 45%, transparent 30%, rgba(0,0,0,0.55) 100%),
    linear-gradient(120deg, rgba(0,87,168,0.35) 0%, transparent 42%, rgba(237,28,36,0.12) 100%);
}
.lux-hero__body {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: clamp(32px,6vw,72px) clamp(20px,5vw,60px) clamp(72px,12vh,140px);
}
.lux-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); margin-bottom: 18px;
}
.lux-eyebrow::before {
  content: ''; width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--accent-red), rgba(255,255,255,0.5));
}
.lux-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 88px); font-weight: 500;
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 18px; text-wrap: balance; color: #fff;
}
.lux-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: clamp(13px, 1.4vw, 15px); font-weight: 500;
  color: rgba(255,255,255,0.85); margin: 0 0 32px;
}
.lux-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); display: inline-block; }
.lux-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lux-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 9999px; border: none;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer;
  transition: all 220ms var(--ease-out);
}
.lux-btn--red { background: var(--accent-red); color: #fff; }
.lux-btn--red:hover { background: var(--accent-red-deep); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(237,28,36,0.4); }
.lux-btn--glass {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.lux-btn--glass:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.7); }
.lux-btn svg { width: 16px; height: 16px; }

.lux-scroll-hint {
  position: absolute; bottom: clamp(20px,3vh,36px); right: clamp(20px,5vw,60px);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.6);
}
.lux-mouse {
  width: 22px; height: 34px; border: 2px solid rgba(255,255,255,0.4);
  border-radius: 12px; padding-top: 5px; display: flex; justify-content: center;
}
.lux-mouse__wheel {
  width: 2px; height: 6px; background: rgba(255,255,255,0.7);
  border-radius: 2px; animation: lux-wheel 1.6s infinite;
}
@keyframes lux-wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(10px); } }
.lux-scroll-hint span { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; }
@media (max-width: 760px) { .lux-scroll-hint { display: none; } }

/* ── Glass stats dock ──────────────────────────────────── */
.lux-dock-wrap {
  position: relative; z-index: 50;
  max-width: 1240px; margin: -42px auto 0;
  padding: 0 clamp(20px,5vw,48px);
}
.lux-dock {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 48px rgba(15,23,42,0.12);
  padding: 16px clamp(14px,3vw,28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(14px,2vw,22px);
}
.lux-dock__stat { padding: 4px 8px; }
.lux-dock__label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
.lux-dock__value { font-size: clamp(14px,1.6vw,16px); font-weight: 600; color: var(--fg-ink); letter-spacing: -0.01em; }
.lux-dock__value.is-price { color: var(--accent-red); font-weight: 800; font-size: clamp(16px,1.8vw,18px); }

/* ── Intro ─────────────────────────────────────────────── */
.lux-intro {
  max-width: 760px; margin: 0 auto;
  padding: clamp(56px,8vw,96px) clamp(20px,5vw,48px) clamp(32px,5vw,56px);
}
.lux-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent-red); margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
}
.lux-section-label::after {
  content: ''; flex: 1; height: 1px; max-width: 200px;
  background: linear-gradient(90deg, var(--royal-blue), rgba(0,87,168,0));
  opacity: 0.4;
}
.lux-prose { font-size: clamp(15px,1.7vw,18px); line-height: 1.7; color: #374151; }
.lux-prose--lede {
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: clamp(20px,3vw,28px);
  line-height: 1.45; color: var(--fg-ink);
}

/* ── Chapter ───────────────────────────────────────────── */
.lux-chapter {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(32px,5vw,64px);
  max-width: 1280px; margin: clamp(56px,8vw,96px) auto;
  padding: 0 clamp(20px,5vw,48px);
  align-items: center;
}
@media (min-width: 900px) {
  .lux-chapter { grid-template-columns: 1.05fr 1fr; }
  .lux-chapter.is-flipped .lux-chapter__media { order: 2; }
}
.lux-chapter__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: clamp(20px,3vw,32px);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(15,23,42,0.18);
}
@media (min-width: 900px) { .lux-chapter__media { aspect-ratio: 3/4; } }
.lux-chapter__img {
  position: absolute; inset: -3% -3%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--bg-card-quiet);
  will-change: transform;
}
.lux-chapter__num {
  position: absolute; left: clamp(16px,3vw,28px); top: clamp(12px,3vw,22px);
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(80px,14vw,180px);
  line-height: 0.9; color: rgba(255,255,255,0.85);
  text-shadow: 0 6px 28px rgba(0,0,0,0.4);
  z-index: 2; user-select: none;
}

.lux-chapter__dateline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-red); margin-bottom: 18px;
}
.lux-chapter__dateline .lux-dot { background: rgba(13,15,17,0.35); }
.lux-chapter__place { color: var(--royal-blue); }
.lux-chapter__title {
  font-family: var(--font-display);
  font-size: clamp(34px,5vw,60px);
  font-weight: 500; line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 20px; color: var(--fg-ink);
  text-wrap: balance;
}
.lux-chapter__opener {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(18px,2.4vw,24px);
  line-height: 1.45; color: #1f2937;
  margin: 0 0 22px;
  padding-left: 20px; border-left: 3px solid var(--accent-red);
}
.lux-chapter__body {
  font-size: clamp(15px,1.6vw,17px);
  line-height: 1.7; color: #374151;
  margin: 0 0 28px;
}
/* Day description — render the operator's rich text faithfully (paragraphs,
   line breaks and lists preserved) rather than shredding it into bullets. */
.lux-chapter__prose {
  font-size: clamp(15px,1.6vw,17px);
  line-height: 1.7; color: #1f2937;
  margin: 0 0 26px;
}
.lux-chapter__prose .trix-content > div, .lux-chapter__prose .trix-content > p { margin: 0 0 0.8em; }
.lux-chapter__prose .trix-content > *:last-child { margin-bottom: 0; }
.lux-chapter__prose .trix-content ul, .lux-chapter__prose .trix-content ol { margin: 0.6em 0; padding-left: 1.5em; }
.lux-chapter__prose .trix-content ul { list-style: disc; }
.lux-chapter__prose .trix-content ol { list-style: decimal; }
.lux-chapter__prose .trix-content li { margin: 0.3em 0; }
.lux-chapter__prose .trix-content strong { color: var(--fg-ink); font-weight: 700; }
.lux-chapter__prose .trix-content a { color: var(--royal-blue); text-decoration: underline; }

/* Pointwise bullets: one fact per <li>. Spec'd by
   spec/views/itineraries/_public_luxury_chapters.html.erb_spec.rb. */
.lux-chapter__points {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: clamp(15px,1.6vw,17px);
  line-height: 1.55; color: #1f2937;
}
.lux-chapter__points li {
  position: relative;
  padding-left: 22px;
}
.lux-chapter__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--escape-green);
}
.lux-chapter__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 12px;
}
.lux-mini {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 13px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease, border-color 240ms ease;
}
.lux-mini:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(15,23,42,0.10); }
.lux-mini__head { display: flex; align-items: center; gap: 8px; }
.lux-mini__icon {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; flex-shrink: 0;
}
.lux-mini__icon svg { width: 16px; height: 16px; stroke-width: 2; }
.lux-mini__label { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.lux-mini__name { font-weight: 700; font-size: 14px; color: var(--fg-ink); margin: 0; letter-spacing: -0.01em; line-height: 1.25; }
.lux-mini__meta { font-size: 12px; color: var(--fg-3); margin: 2px 0 0; line-height: 1.35; }
.lux-mini__desc { font-size: 12px; color: var(--fg-2); margin: 6px 0 0; line-height: 1.45; white-space: pre-line; }
.lux-mini--hotel    .lux-mini__icon  { background: #FEF3C7; color: #92400E; }
.lux-mini--hotel    .lux-mini__label { color: #92400E; }
.lux-mini--hotel:hover    { border-color: #FCD34D; }
.lux-mini--transfer .lux-mini__icon  { background: var(--royal-blue-soft); color: var(--royal-blue-deep); }
.lux-mini--transfer .lux-mini__label { color: var(--royal-blue); }
.lux-mini--transfer:hover { border-color: #BFDBFE; }
.lux-mini--act      .lux-mini__icon  { background: var(--escape-green-soft); color: var(--escape-green-deep); }
.lux-mini--act      .lux-mini__label { color: var(--escape-green-deep); }
.lux-mini--act:hover      { border-color: #86EFAC; }

/* ── Interlude ─────────────────────────────────────────── */
.lux-interlude {
  margin: clamp(40px,6vw,80px) auto;
  padding: clamp(48px,7vw,72px) clamp(20px,5vw,48px);
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(0,87,168,0.06), transparent 70%),
    linear-gradient(180deg, transparent, rgba(255,255,255,0.4), transparent);
}
.lux-interlude.is-darker { background: linear-gradient(180deg, #0f1c2e, #142436); color: #fff; }
.lux-interlude__rule { width: 60px; height: 2px; background: var(--accent-red); margin: 0 auto 24px; }
.lux-interlude__q {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(22px,4vw,40px); line-height: 1.3;
  max-width: 880px; margin: 0 auto;
  text-wrap: balance;
}
.lux-interlude.is-darker .lux-interlude__q { color: #fff; }
.lux-interlude__attr {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 22px;
}

/* ── Includes / Excludes ───────────────────────────────── */
.lux-inex { max-width: 1100px; margin: clamp(40px,6vw,72px) auto; padding: 0 clamp(20px,5vw,48px); }
.lux-inex__grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px,2.5vw,24px); }
@media (min-width: 760px) { .lux-inex__grid { grid-template-columns: 1fr 1fr; } }
.lux-inex__col {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 18px;
  padding: clamp(20px,3vw,28px);
}
.lux-inex__col--in  { border-left: 3px solid var(--escape-green); }
.lux-inex__col--ex  { border-left: 3px solid var(--accent-red); }
.lux-inex__col--addons { border-left: 3px solid var(--royal-blue); }
.lux-inex__col--addons li::before { content: '•'; position: absolute; left: 0; top: 6px; color: var(--royal-blue); font-weight: 700; }
.lux-inex__col h4 { font-size: 18px; font-weight: 700; color: var(--fg-ink); margin: 0 0 14px; }
.lux-inex__col ul { margin: 0; padding-left: 0; list-style: none; }
.lux-inex__col li { position: relative; padding: 6px 0 6px 24px; font-size: 14.5px; line-height: 1.5; color: #374151; }
.lux-inex__col--in li::before { content: '✓'; position: absolute; left: 0; top: 6px; color: var(--escape-green); font-weight: 700; }
.lux-inex__col--ex li::before { content: '×'; position: absolute; left: 0; top: 4px; color: var(--accent-red); font-weight: 700; font-size: 18px; }

/* ── Details band (add-ons / gallery / policies on the luxury surface) ──
   Renders the same esc-* sections the classic layout uses, on a light band
   so the binding T&C and policies always appear on luxury itineraries too. */
.lux-details {
  max-width: 1100px;
  margin: clamp(40px,6vw,72px) auto 0;
  padding-top: clamp(32px,5vw,56px);
}

/* ── Contact band ──────────────────────────────────────── */
.lux-contact {
  position: relative; margin: clamp(56px,8vw,96px) 0 0;
  padding: clamp(48px,8vw,80px) clamp(20px,5vw,48px) clamp(56px,8vw,80px);
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(237,28,36,0.18), transparent 52%),
    radial-gradient(90% 70% at 100% 30%, rgba(0,162,79,0.16), transparent 50%),
    linear-gradient(168deg, #023e6f 0%, var(--royal-blue) 38%, #003d66 100%);
  color: #fff; overflow: hidden;
}
.lux-contact__shell {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: clamp(28px,4vw,44px);
  border-radius: 26px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 32px 80px rgba(0,20,40,0.35);
}
.lux-contact__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px,4.5vw,48px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 18px; text-wrap: balance;
}
.lux-contact__lede { font-size: clamp(15px,1.6vw,17px); line-height: 1.65; color: rgba(255,255,255,0.8); margin: 0 0 28px; max-width: 36rem; }
.lux-contact__channels { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) { .lux-contact__channels { flex-direction: row; flex-wrap: wrap; } }
.lux-contact__channel {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  text-decoration: none; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  transition: all 220ms var(--ease-out);
}
.lux-contact__channel:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.lux-contact__channel svg { width: 18px; height: 18px; }
.lux-contact__channel--wa { background: #25D366; border-color: #25D366; }
.lux-contact__channel--wa:hover { background: #1ebe5d; }

/* ── Floating action bar (FAB) ─────────────────────────── */
.lux-fab {
  position: fixed; bottom: 22px; left: 50%; z-index: 200;
  transform: translateX(-50%) translateY(20px);
  width: calc(100% - 28px); max-width: 480px;
  opacity: 0; pointer-events: none;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.lux-fab.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.lux-fab__inner {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 9999px;
  padding: 10px 10px 10px 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 14px 40px rgba(15,23,42,0.18);
}
.lux-fab__label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.lux-fab__value { font-size: 18px; font-weight: 800; color: var(--fg-ink); }
.lux-fab__cta {
  background: var(--accent-red); color: #fff; border: none;
  border-radius: 9999px;
  padding: 12px 22px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: all 200ms ease;
  display: inline-flex; align-items: center;
}
.lux-fab__cta:hover { background: var(--accent-red-deep); transform: scale(1.03); }

/* ── Chapter rail (desktop only) ───────────────────────── */
.lux-rail {
  position: fixed; top: 50%; right: 24px; transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 1100px) { .lux-rail { display: none; } }
.lux-rail a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
  padding: 4px 8px; border-radius: 9999px;
  transition: all 200ms ease;
  background: transparent;
}
.lux-rail__num {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(0,87,168,0.45);
  background: rgba(255,255,255,0.85);
  transition: all 200ms ease;
}
.lux-rail__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--fg-3);
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width 240ms ease;
}
.lux-rail a:hover .lux-rail__title,
.lux-rail a.is-active .lux-rail__title { max-width: 200px; padding-right: 4px; }
.lux-rail a.is-active .lux-rail__num { background: var(--accent-red); border-color: var(--accent-red); transform: scale(1.2); }
.lux-rail a.is-active .lux-rail__title { color: var(--fg-ink); }

@media (prefers-reduced-motion: reduce) {
  .lux-hero__img, .lux-chapter__img { transform: none !important; }
  .lux-mini, .lux-contact__channel, .lux-btn, .lux-fab__cta { transition: none !important; }
}

/* ── Admin-only layout toggle (floating pill, top-right) ─── */
.esc-view-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 300;
}
@media (min-width: 768px) {
  .esc-view-toggle { top: 24px; right: 24px; }
}
.esc-view-toggle form { margin: 0; }
.esc-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 9999px;
  font-family: var(--font-ui, system-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.25);
  transition: all 220ms var(--ease-out);
  text-decoration: none;
}
.esc-view-toggle__btn:hover {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}
.esc-view-toggle__btn svg { width: 14px; height: 14px; }
.esc-view-toggle__btn .esc-view-toggle__sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-left: 4px;
}

/* ── Public receipt: payment table + badges (uses esc tokens) ── */
.esc-pmt-table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.esc-pmt-table table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
}
.esc-pmt-table thead th {
  text-align: left;
  background: var(--bg-card-quiet);
  padding: 0.7rem 0.95rem;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border-soft);
}
.esc-pmt-table tbody td {
  padding: 0.85rem 0.95rem;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-quiet);
  vertical-align: middle;
}
.esc-pmt-table tbody tr:last-child td { border-bottom: none; }
.esc-pmt-table tbody tr.is-current {
  background: linear-gradient(90deg, rgba(0, 87, 168, 0.06), transparent 80%);
}
.esc-pmt-table tbody tr.is-current td:first-child { color: var(--royal-blue); font-weight: 700; }
.esc-pmt-table .esc-pmt-label { font-weight: 700; color: var(--fg-ink); }
.esc-pmt-table .esc-pmt-amount { font-weight: 700; color: var(--fg-ink); white-space: nowrap; }

.esc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.esc-badge--green { background: var(--escape-green-soft); color: var(--escape-green-deep); }
.esc-badge--amber { background: #fef3c7; color: #92400e; }
.esc-badge--red   { background: var(--accent-red-soft); color: var(--accent-red-deep); }
.esc-badge--blue  { background: var(--royal-blue-soft); color: var(--royal-blue); }
.esc-badge--gray  { background: var(--bg-card-quiet); color: var(--fg-3); }

/* ── Trip summary strips (route with night splits · component counts ·
      included badges). Mobile-first: wraps freely at 320px, single card. ── */
.esc-strips {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.esc-routeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-ink);
}
.esc-routeline__arrow { color: var(--escape-green); font-weight: 800; }
.esc-routeline__stop { white-space: nowrap; }
.esc-countline {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.esc-badgeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ── Boarding-pass flight cards. Mobile-first: the airline side panel
      stacks above the route; from 640px it docks left like a ticket stub.
      Onward = royal blue, return = escape green. ── */
.esc-flights { display: grid; gap: 0.9rem; }
.esc-ticket-wrap { display: grid; gap: 0; justify-items: center; }
.esc-ticket__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 -14px;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}
.esc-ticket__tag svg { width: 13px; height: 13px; }
.esc-ticket__tag.esc-ticket--blue { background: var(--royal-blue); }
.esc-ticket__tag.esc-ticket--green { background: var(--escape-green); }

/* Connection chip between two chained flight segments (computed by
   Itineraries::FlightJourneys). Deliberately quiet next to the ticket tags —
   it is information between tickets, not a ticket. */
.esc-layover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: center;
  margin: 0;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: var(--bg-card-quiet);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.esc-layover svg { width: 13px; height: 13px; }

/* Per-direction journey totals line under the flights title. */
.esc-flights__totals {
  margin: -0.35rem 0 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
}
.esc-ticket {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
}
.esc-ticket__side {
  padding: 1.1rem 1.2rem;
  color: #fff;
  display: grid;
  gap: 0.55rem;
  align-content: start;
}
.esc-ticket--blue .esc-ticket__side { background: var(--royal-blue); }
.esc-ticket--green .esc-ticket__side { background: var(--escape-green); }
.esc-ticket__airline { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0.02em; }
.esc-ticket__sidegroup { border-top: 1px dashed rgba(255, 255, 255, 0.35); padding-top: 0.5rem; }
.esc-ticket__sidelabel { margin: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.esc-ticket__sidevalue { margin: 2px 0 0; font-size: 14px; font-weight: 800; }
.esc-ticket__cost {
  margin-top: 0.25rem;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 0.55rem 0.8rem;
  text-align: center;
}
.esc-ticket--blue .esc-ticket__cost .esc-ticket__costvalue { color: var(--royal-blue); }
.esc-ticket--green .esc-ticket__cost .esc-ticket__costvalue { color: var(--escape-green-deep); }
.esc-ticket__costvalue { margin: 0; font-size: 18px; font-weight: 900; }
.esc-ticket__costunit { margin: 0; font-size: 10.5px; font-weight: 700; color: var(--fg-3); }
.esc-ticket__main { padding: 1.1rem 1.2rem; display: grid; gap: 0.9rem; }
.esc-ticket__route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px dashed var(--border-soft);
  padding-bottom: 0.9rem;
}
.esc-ticket__port--to { text-align: right; }
.esc-ticket__city { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.esc-ticket__code { margin: 2px 0; font-size: 30px; font-weight: 900; line-height: 1; }
.esc-ticket--blue .esc-ticket__code { color: var(--royal-blue); }
.esc-ticket--green .esc-ticket__code { color: var(--escape-green-deep); }
.esc-ticket__airport { margin: 0; font-size: 11.5px; color: var(--fg-3); }
.esc-ticket__path { color: var(--fg-3); display: grid; justify-items: center; }
.esc-ticket__path svg { width: 22px; height: 22px; }
.esc-ticket__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.9rem; }
.esc-ticket__row--foot { border-top: 1px dashed var(--border-soft); padding-top: 0.9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esc-ticket__label { margin: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.esc-ticket__value { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: var(--fg-ink); }
.esc-ticket__sub { margin: 1px 0 0; font-size: 11px; color: var(--fg-3); }
@media (min-width: 640px) {
  .esc-ticket { grid-template-columns: 220px 1fr; }
  .esc-ticket__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .esc-ticket__code { font-size: 38px; }
}

/* Footnote under policy / add-on tables. */
.esc-policy__note {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-3);
}
.esc-pmt-table .esc-pmt-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  white-space: nowrap;
}

.esc-receipt-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  background: var(--bg-card-quiet);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-top: 16px;
}
@media (min-width: 640px) {
  .esc-receipt-meta { grid-template-columns: repeat(3, 1fr); }
}
.esc-receipt-meta__cell { font-family: var(--font-ui); }
.esc-receipt-meta__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 4px;
}
.esc-receipt-meta__value { font-size: 15px; font-weight: 700; color: var(--fg-ink); margin: 0; letter-spacing: -0.01em; }
.esc-receipt-meta__value.is-red { color: var(--accent-red); }
.esc-receipt-meta__value.is-green { color: var(--escape-green); }

/* ── Trip pulse (public daily check-in / post-trip feedback form) ──────────
   Token-gated page linked from the morning WhatsApp check-in. Mobile-first:
   day chips wrap, stars are 44px touch targets. Uses only existing tokens. */
.esc-feedback__days { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.esc-feedback__day {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.esc-feedback__day.is-done { color: var(--escape-green-deep, var(--escape-green)); border-color: var(--escape-green); }
.esc-feedback__day.is-active { background: var(--royal-blue); border-color: var(--royal-blue); color: #fff; }
.esc-feedback { margin: 14px 0 4px; }
.esc-feedback__q { font-size: 15px; font-weight: 600; color: var(--fg-ink, #111827); margin: 10px 0 6px; }
/* Reversed-row radio stars: inputs are visually hidden, hover/checked fills
   right-to-left so the DOM order (5→1) reads left-to-right for the eye. */
.esc-feedback__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin: 4px 0 10px; }
.esc-feedback__star-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.esc-feedback__star {
  font-size: 30px;
  line-height: 44px;
  min-width: 44px;
  text-align: center;
  color: #d1d5db;
  cursor: pointer;
}
.esc-feedback__star:hover,
.esc-feedback__star:hover ~ .esc-feedback__star,
.esc-feedback__star-input:checked ~ .esc-feedback__star { color: var(--star-yellow); }
.esc-feedback__star-input:focus-visible + .esc-feedback__star { outline: 2px solid var(--royal-blue); border-radius: 12px; }
.esc-feedback__text {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: #374151;
  margin-bottom: 12px;
  resize: vertical;
}
.esc-feedback__text:focus { outline: 2px solid var(--royal-blue); border-color: var(--royal-blue); }
.esc-feedback__posttrip { margin-top: 26px; padding-top: 18px; border-top: 1px solid #eef1f5; }
.esc-feedback__note { margin-top: 20px; }

/* ── Travel documents (public KYC upload portal) ──────────────────────────
   Token-gated page linked from the request-documents email/WhatsApp.
   Mobile-first single column, 44px targets, existing tokens only. */
.esc-docs__section { margin-top: 26px; padding-top: 18px; border-top: 1px solid #eef1f5; }
.esc-docs__status { font-size: 14px; color: #374151; margin: 8px 0 6px; }
.esc-docs__filechip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--escape-green);
  border-radius: 9999px;
  color: var(--escape-green-deep, var(--escape-green));
  font-size: 12px;
  font-weight: 600;
}
.esc-docs__form { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }
.esc-docs__input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  color: #374151;
}
.esc-docs__input:focus { outline: 2px solid var(--royal-blue); border-color: var(--royal-blue); }
.esc-docs__filelabel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.esc-docs__file { font-size: 13px; min-height: 44px; }
.esc-docs__note { margin-top: 20px; }
.esc-docs__flash {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 14px;
}
.esc-docs__flash--ok { color: var(--escape-green-deep, var(--escape-green)); border: 1px solid var(--escape-green); }
.esc-docs__flash--err { color: var(--accent-red); border: 1px solid var(--accent-red); }
@media (min-width: 481px) {
  .esc-docs__form { max-width: 420px; }
}

/* ---------------------------------------------------------------------------
   Static legal / company pages (About, Privacy, Contact, Refund).
   Shared component so every legal page reads as one document and no view
   ships an inline <style>. Mirrors the older .policy-doc look under the brand
   royal-blue. Mobile-first: single column ≤480px, widened at ≥481px.
   --------------------------------------------------------------------------- */
.legal-doc { max-width: 880px; margin: 0 auto; padding: 32px 18px 72px; color: #1a1a1a; }
.legal-doc .crumbs { font-size: 13px; color: #555; margin: 0 0 12px; }
.legal-doc .crumbs a { color: var(--royal-blue); text-decoration: none; }
.legal-doc .crumbs a:hover { text-decoration: underline; }
.legal-doc h1 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; margin: 0 0 6px; color: var(--royal-blue); }
.legal-doc .subtitle { font-size: 15px; color: #323a46; margin: 0 0 4px; }
.legal-doc .meta { font-size: 12px; color: #555; margin: 0 0 4px; }
.legal-doc .frame { border: 1px solid #d4d4d4; border-radius: 16px; padding: 22px; background: #fff; line-height: 1.6; font-size: 14.5px; margin-top: 20px; }
.legal-doc nav.toc { font-size: 13px; line-height: 1.9; margin: 6px 0 0; }
.legal-doc nav.toc a { color: var(--royal-blue); text-decoration: none; }
.legal-doc h2 { font-family: var(--font-display); font-size: 22px; color: var(--royal-blue); margin: 26px 0 8px; scroll-margin-top: 80px; }
.legal-doc h2:first-of-type { margin-top: 4px; }
.legal-doc h3 { font-size: 15px; color: #0d0f11; margin: 16px 0 4px; }
.legal-doc p { margin: 8px 0; }
.legal-doc a { color: var(--royal-blue); }
.legal-doc ul { padding-left: 20px; margin: 8px 0; }
.legal-doc li { margin: 4px 0; }
.legal-doc .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 420px; }
.legal-doc th, .legal-doc td { border: 1px solid #d4d4d4; padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-doc th { background: #f3f6fa; color: var(--royal-blue); font-weight: 700; }
.legal-doc .callout { border: 1px solid #d4d4d4; border-left: 3px solid var(--royal-blue); border-radius: 12px; padding: 14px 16px; background: #f8fafc; margin: 16px 0; }
.legal-doc .foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid #d4d4d4; font-size: 12px; color: #555; line-height: 1.6; }
.legal-doc .foot p { margin: 2px 0; }

/* Contact page — stacked info rows, each a 44px+ touch target where tappable. */
.legal-contact { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0 4px; }
.legal-contact .row { border: 1px solid #d4d4d4; border-radius: 12px; padding: 14px 16px; background: #fff; }
.legal-contact .row .label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 0 0 4px; }
.legal-contact .row .value { font-size: 15px; color: #1a1a1a; margin: 0; line-height: 1.5; }
.legal-contact .row a { color: var(--royal-blue); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.legal-contact .row a:hover { text-decoration: underline; }

@media (min-width: 481px) {
  .legal-doc { padding: 40px 24px 80px; }
  .legal-contact { grid-template-columns: repeat(2, 1fr); }
}

/* ── Fixed-departure pricing ────────────────────────────────────────────
   Rate grids, child bands and departure dates. Only rendered for group
   tours sold on published dates; a normal FIT itinerary emits none of it.
   Built on the existing .esc-pmt-table / .esc-tiers primitives so the
   sections read as native page furniture, not a bolted-on table. */

.esc-matrix-block { margin-top: 18px; }
.esc-matrix-block + .esc-matrix-block { margin-top: 26px; }

.esc-matrix__name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--royal-blue);
  margin-bottom: 8px;
}

.esc-matrix__hotels {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--fg-2);
}
.esc-matrix__hotels li { padding: 2px 0 2px 14px; position: relative; }
.esc-matrix__hotels li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--escape-green);
}

/* Only meaningful while the table actually overflows, so it is hidden once
   there is room for the full grid. */
.esc-matrix__hint {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 6px;
}

/* A 6-column grid is ~700px against a 360px viewport. It scrolls inside its
   own container — the page body never does (.esc-itin is overflow-x: clip). */
.esc-matrix {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.esc-matrix table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}
.esc-matrix thead th {
  text-align: left;
  background: var(--bg-card-quiet);
  padding: 0.7rem 0.95rem;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  min-width: 96px;
  scroll-snap-align: start;
}
.esc-matrix tbody td {
  padding: 0.85rem 0.95rem;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-quiet);
  white-space: nowrap;
  min-width: 96px;
  scroll-snap-align: start;
  vertical-align: middle;
}
.esc-matrix tbody tr:last-child td { border-bottom: none; }

/* Without a pinned first column a phone shows prices with no idea which
   category they belong to. */
.esc-matrix .is-rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 132px;
  box-shadow: 1px 0 0 var(--border-quiet);
}
.esc-matrix thead .is-rowhead { background: var(--bg-card-quiet); }
.esc-matrix tbody .is-rowhead { background: #fff; }

@media (min-width: 761px) {
  .esc-matrix__hint { display: none; }
}

/* Departure cards — same responsive rhythm as .esc-tiers. */
.esc-depgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
.esc-depcard {
  min-width: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.esc-depcard__date {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-ink);
  margin-bottom: 2px;
}
.esc-depcard__meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-3);
}
.esc-depcard__price {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-ink);
  margin: 6px 0 8px;
}
.esc-depcard .esc-badge { margin-top: 8px; }
.esc-depcard.is-sold-out { opacity: 0.55; }

@media (min-width: 481px) {
  .esc-depgrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 768px) {
  .esc-depgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════ CMS EMBED — clear the CMS chrome ═══════════
   On /dashboard/itineraries/:id this stylesheet loads inside the CMS shell,
   which the standalone customer page does not have. Two pieces of CMS chrome
   are fixed to the viewport there and collide with the bars below:

     .cms-mobilebar  top 0,    ~63px tall, z-index 70   (≤900px)
     .cms-tabbar     bottom 0, ~65px tall, z-index 45   (≤900px)

   Without these offsets the view toggle lands on top of the header logo, and
   the tab bar (z-index 45) paints over .esc-stickybar (z-index 40) so its
   buttons cannot be reached. Scoped to .cms-embed-luxury — set by the CMS
   layout only — so the customer-facing page keeps its original placement. */
@media (max-width: 900px) {
  .cms-embed-luxury .esc-view-toggle {
    top: calc(63px + env(safe-area-inset-top, 0px) + 10px);
  }
  .cms-embed-luxury .esc-stickybar {
    bottom: calc(65px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 10px;
  }
  .cms-embed-luxury .lux-fab {
    bottom: calc(65px + env(safe-area-inset-bottom, 0px) + 14px);
  }
}