/* One pale contour material connects the opening and travel chapters. */
.contour-scene { position: relative; isolation: isolate; overflow: hidden; background: var(--travel-canvas); }
.contour-scene::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 50% 28%, var(--travel-canvas) 28%, transparent 73%), radial-gradient(ellipse at 8% 95%, var(--travel-fold), transparent 65%), radial-gradient(ellipse at 105% 88%, var(--travel-fold), transparent 60%); }
.contour-scene[data-renderer='webgl']::before { display: none; }
.contour-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-scene { background: var(--canvas-top); }
.hero-scene .contour-canvas, .hero-scene::before { mask-image: linear-gradient(transparent, #000 22%, #000 65%, transparent); }
.hero-scene .hero-art { position: relative; z-index: 1; }
.travel-chapter { --search-max: 720px; min-height: 640px; padding-block: 112px; border-top: 1px solid var(--rule); }
.travel-content { position: relative; z-index: 1; }
.travel-chapter .itinerary-preview { margin-top: var(--space-6); }
.travel-chapter .preview-enquiry { margin-top: var(--space-6); }
@media (max-width: 800px) {
  .travel-chapter { min-height: 600px; padding-block: var(--space-9); }
}
@media (max-width: 600px) {
  .travel-chapter { min-height: 640px; padding-block: var(--space-8); }
  .travel-chapter .section-heading { max-width: 350px; margin-inline: auto; }
  .travel-chapter .reading-copy { max-width: 350px; }
  .travel-chapter .preview-enquiry { margin-top: var(--space-5); }
}
@media (forced-colors: active) {
  .contour-canvas, .contour-scene::before { display: none !important; }
  .contour-scene { background: Canvas; color: CanvasText; }
}

/* Shared, explicitly local preview; its placeholder surfaces use the company cards. */
.travel-preview { scroll-margin-top: -16px; }
.search-spinner { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.travel-preview[data-state='loading'] .search-spinner { display: block; }
.travel-preview[data-state='loading'] .search-icon { display: none; }
.travel-preview[data-state='loading'] .search-button { color: var(--paper); background: var(--gel-blue); }
.preview-layout { max-width: var(--content-max); margin: var(--space-6) auto 0; scroll-margin-block: var(--space-5); }
.preview-layout-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); }
.preview-layout-heading > div { min-width: 0; }
.preview-layout-heading h3 { font-size: 24px; font-weight: var(--weight-semibold); letter-spacing: -.025em; line-height: 1.2; }
.preview-place { color: var(--blue-ink); font-size: var(--text-ui); margin-top: var(--space-2); overflow-wrap: anywhere; }
.preview-close { flex: 0 0 44px; width: 44px; padding: 0; }
.preview-bento { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); }
.preview-card { padding: var(--space-5); border-radius: var(--radius-bento); background: var(--paper); box-shadow: var(--shadow-bento); min-width: 0; }
.preview-card h4 { margin: 0; font-size: 20px; font-weight: var(--weight-semibold); line-height: 1.3; letter-spacing: -.02em; }
.preview-trip { grid-row: span 2; display: flex; flex-direction: column; padding: var(--space-6); }
.preview-route { display: grid; align-items: center; flex: 1; min-height: 160px; margin-block: var(--space-5); border-radius: var(--radius-small); background-color: var(--travel-canvas); background-image: linear-gradient(var(--paper) 1px, transparent 1px), linear-gradient(90deg, var(--paper) 1px, transparent 1px); background-size: 28px 28px; }
.preview-route svg { width: 100%; }
.preview-route .route-track { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; }
.preview-route circle { fill: var(--paper); stroke: var(--blue); stroke-width: 3; }
.preview-day-heading { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.preview-day-number { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; background: var(--blue-tint); color: var(--blue-ink); font-size: var(--text-ui); font-weight: var(--weight-medium); }
.skeleton { display: block; overflow: hidden; position: relative; background: var(--paper-inset); border-radius: var(--radius-pill); }
.preview-pills { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.preview-pills .skeleton { height: 26px; width: 76px; max-width: 28%; background: var(--blue-tint); }
.preview-pills .skeleton:nth-child(2) { width: 104px; }
.preview-pills .skeleton:nth-child(3) { width: 60px; }
.preview-lines { display: grid; gap: var(--space-2); }
.preview-lines .skeleton { height: 10px; width: 84%; }
.preview-lines .skeleton:nth-child(2) { width: 58%; }
.preview-note { max-width: 720px; margin: var(--space-5) auto 0; text-align: center; color: var(--ink-secondary); font-size: var(--text-ui); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .travel-preview[data-state='loading'] .search-spinner { animation: preview-spin 900ms linear infinite; }
  .preview-layout:not([hidden]) .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 85%), transparent); animation: preview-shimmer 1400ms ease-in-out infinite; }
  .preview-layout:not([hidden]) { animation: preview-arrive 240ms var(--ease); }
}
@keyframes preview-spin { to { transform: rotate(360deg); } }
@keyframes preview-shimmer { to { transform: translateX(100%); } }
@keyframes preview-arrive { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .travel-preview { scroll-margin-top: 0; }
  .preview-bento { grid-template-columns: 1fr; }
  .preview-trip { grid-row: auto; padding: var(--space-5); }
  .preview-layout-heading h3 { font-size: 22px; }
  .preview-route { min-height: 140px; }
  .preview-feedback { font-size: var(--text-ui); }
}
@media (forced-colors: active) {
  .preview-card { border: 1px solid CanvasText; }
  .skeleton { background: GrayText; }
  .preview-route .route-track, .preview-route circle { stroke: CanvasText; }
}