@charset "UTF-8";

/* OnlineTours: warm brand colour, generous type and calm, useful motion. */
:root {
  --ink: #201c18;
  --muted: #72665c;
  --blue: #b64b09;
  --blue-dark: #913b06;
  --brand: #f58220;
  --brand-light: #ffad4d;
  --brand-mark: #fd9d27;
  --brand-soft: #fff0dc;
  --mint: #ffad4d;
  --line: #eadfD4;
  --canvas: #fffaf4;
  --nav: #172735;
  --shadow: 0 16px 48px rgb(91 55 25 / 7%);
  --rail-width: 244px;
  --page-gutter: clamp(24px, 3.4vw, 56px);
  --radius-card: 22px;
  color-scheme: light;
  background: var(--canvas);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 84% 8%, rgb(255 173 77 / 13%), transparent 35%),
    radial-gradient(ellipse at 29% 28%, rgb(251 227 201 / 20%), transparent 36%),
    linear-gradient(180deg, #fffaf4 0%, #fffcf8 58%, #fff8ef 100%);
  color: var(--ink);
  line-height: 1.6;
}
button, input, textarea, select { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #b64b09;
  outline-offset: 4px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #b64b09;
  outline-offset: 2px;
}
.skip {
  left: calc(var(--rail-width) + 24px);
  border-radius: 12px;
  color: #201c18;
  box-shadow: var(--shadow);
}

/* The dark rail gives the travel imagery and orange brand room to breathe. */
.sidebar {
  width: var(--rail-width);
  padding: 32px 22px 24px;
  background:
    radial-gradient(ellipse at 4% 0%, rgb(245 130 32 / 13%), transparent 48%),
    linear-gradient(160deg, #213342 0%, #142330 64%, #1e2b34 100%);
  border-right: 1px solid rgb(255 255 255 / 5%);
  box-shadow: 12px 0 36px rgb(20 34 45 / 4%);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #586674 transparent;
}
.brand { gap: 8px; font-size: 23px; letter-spacing: -1.1px; }
.brand-symbol { color: var(--brand-mark); }
.brand-symbol svg { fill: var(--brand-mark); }
.brand-sub { color: #c3c8cd; font-size: 8px; letter-spacing: 1.3px; }
.new-trip {
  min-height: 50px;
  margin: 34px 0 25px;
  padding: 13px 16px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--brand), var(--brand-light));
  color: #271709;
  font-size: 14px;
  box-shadow: 0 8px 24px rgb(245 130 32 / 16%);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.new-trip svg { width: 20px; height: 20px; stroke-width: 2; }
.main-nav { gap: 9px; }
.nav-item {
  min-height: 49px;
  padding: 12px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #c4cdd5;
  white-space: normal;
  font-size: 13px;
  gap: 10px;
  transition: background .18s ease, border-color .18s ease;
}
.nav-item.active {
  background: linear-gradient(110deg, rgb(255 173 77 / 13%), rgb(255 255 255 / 5%));
  border-color: rgb(255 173 77 / 17%);
  color: #fff;
}
.nav-item.active > svg { color: var(--brand-light); }
.nav-pill {
  color: #ffd7a4;
  background: rgb(255 173 77 / 9%);
  border-color: rgb(255 173 77 / 28%);
  border-radius: 6px;
  padding: 2px 6px;
}
.nav-item small { color: #b8c4cf; }
.saved-count { background: #334450; color: #f5dfc5; border-radius: 7px; padding: 2px 7px; }
.sidebar-note { margin: 43px 11px 28px; }
.tiny-label { color: #c8bba8; font-size: 9px; letter-spacing: 1.1px; }
.sidebar-note p { font-size: 22px; font-weight: 600; line-height: 1.6; letter-spacing: -.7px; }
.note-line { background: var(--brand-mark); width: 38px; height: 3px; border-radius: 3px; }
.sidebar-note small { color: #b7c1ca; font-size: 12px; }
.human-link { min-height: 70px; padding: 18px 0 13px; font-size: 12px; }
.human-avatar {
  width: 38px;
  height: 38px;
  background: #3d4446;
  color: #ffd5a3;
  border: 1px solid rgb(255 173 77 / 24%);
}
.human-link small { color: #b4c0c9; font-size: 10px; }
.sidebar-bottom > a { color: #bac4ca; font-size: 11px; line-height: 1.6; }
.page { margin-left: var(--rail-width); }
.topbar {
  height: 82px;
  margin: 0 var(--page-gutter);
  border-bottom-color: #eaddce;
  gap: 22px;
}
.topbar-title { font-size: 12px; color: #776859; }
.departure { font-size: 12px; color: #6c5c4e; }
.departure svg { color: #a65318; }
.top-human {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 12px;
  background: #fff2e1;
  color: #733809;
  border: 1px solid #f0dbc1;
  border-radius: 11px;
}
.top-human span { color: #a54a0b; }

/* Fluid workspace: no fixed-height conversation or clipped hero. */
.workspace {
  max-width: 1560px;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
  gap: clamp(28px, 3.2vw, 48px);
  padding: 42px var(--page-gutter) 62px;
}
.conversation { padding-top: 10px; }
.welcome { position: relative; margin-bottom: 29px; isolation: isolate; }
.eyebrow { color: #806448; font-size: 10px; letter-spacing: 1.6px; font-weight: 800; }
.mini-spark { color: #be560e; font-size: 19px; }
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 17px;
  padding: 7px 11px;
  border: 1px solid #efd9bc;
  border-radius: 99px;
  background: rgb(255 243 228 / 86%);
  color: #78502d;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
}
.hero-status::before, .status-dot {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #c36119;
  box-shadow: 0 0 0 4px rgb(245 130 32 / 10%);
  animation: status-breathe 3.4s ease-in-out infinite;
}
.hero-status:has(.status-dot)::before { display: none; }
.welcome h1 {
  max-width: 100%;
  margin: 21px 0 22px;
  font-size: clamp(48px, 4.55vw, 76px);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.welcome h1 > span:not(.title-dot) {
  color: #bd540e;
  font-weight: 850;
  background: linear-gradient(110deg, #b64909 12%, #d56a16 66%, #b64b09 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title-dot { color: #f58220; }
.welcome-copy { font-size: 16px; line-height: 1.85; color: #746657; margin-bottom: 26px; }
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 17px;
  margin: 0 0 24px;
  color: #7c6b58;
  font-size: 11px;
  line-height: 1.6;
}
.brand-strip > span, .brand-strip > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.brand-strip svg { color: #b35616; width: 14px; height: 14px; stroke-width: 1.8; }
.suggestions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.suggestions button {
  min-width: 0;
  min-height: 116px;
  padding: 17px 14px;
  border: 1px solid #e9dccb;
  border-radius: 17px;
  background: linear-gradient(150deg, #fff, #fffaf3);
  box-shadow: 0 5px 18px rgb(101 69 39 / 3%);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.suggestions button > svg { background: #fff0da; color: #aa4e0c; padding: 9px; border-radius: 11px; }
.suggestions button:nth-child(2) > svg { background: #edf3fb; color: #456582; }
.suggestions button:nth-child(3) > svg { background: #f0f4e9; color: #56754b; }
.suggestions button > span { font-size: 13px; font-weight: 750; line-height: 1.6; }
.suggestions .suggest-arrow { right: 14px; top: 14px; color: #967d64; }
.compose-wrap { min-width: 0; }
.composer {
  padding: 21px 20px 15px;
  border: 1px solid #dec5a9;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 7px 0 rgb(245 130 32 / 3%), 0 13px 42px rgb(115 69 24 / 6%);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.composer:focus-within {
  border-color: #d07734;
  box-shadow: 0 0 0 4px rgb(245 130 32 / 9%), 0 16px 40px rgb(115 69 24 / 7%);
}
.composer textarea { min-height: 61px; font-size: 16px; line-height: 1.75; color: #34271f; }
.composer textarea::placeholder { color: #786858; }
.composer-footer { gap: 10px; margin-top: 12px; min-width: 0; }
.parameters-button {
  min-height: 44px;
  border-radius: 11px;
  padding: 10px 13px;
  background: #fff1de;
  color: #7c430f;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}
.parameters-button svg { width: 16px; height: 16px; }
.composer-hint { color: #887869; font-size: 10px; }
.send-button {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: none;
  background: linear-gradient(135deg, #f58220, #ffad4d);
  color: #301b09;
  box-shadow: 0 5px 12px rgb(245 130 32 / 14%);
}
.send-button svg { width: 22px; height: 22px; stroke-width: 2; }
.compose-caption { margin-top: 16px; font-size: 11px; color: #7b6e60; line-height: 1.7; }
.compose-caption svg { color: #95602c; }
.chat-privacy { font-size: 11px; color: #7b6e60; margin-top: 7px; }
.mode-notice { font-size: 12px; color: #765a41; }

/* Photo-led companion panel, with a real image and restrained decorative motion. */
.inspiration { gap: 20px; min-width: 0; padding-top: 3px; }
.travel-visual {
  height: 490px;
  border-radius: 25px;
  border: 5px solid #fff;
  box-shadow: 0 17px 42px rgb(75 87 75 / 14%), 0 0 0 1px #eadbc9;
  isolation: isolate;
}
.travel-visual::after {
  background: linear-gradient(180deg, rgb(16 43 51 / 6%) 8%, rgb(7 32 38 / 14%) 43%, rgb(9 35 39 / 87%) 100%);
}
.travel-visual img { object-position: 51% 34%; transition: transform .8s ease; }
.travel-visual figcaption { inset: auto 24px 25px; }
.visual-tag { color: #fbefdd; font-size: 9px; letter-spacing: 1.5px; }
.travel-visual p { margin: 15px 0 28px; font-size: 31px; letter-spacing: -.8px; line-height: 1.3; }
.travel-visual em { font-size: 47px; line-height: 1.1; color: #ffd5a0; }
.visual-bottom { font-size: 12px; color: #fff1dd; padding-top: 17px; border-top-color: rgb(255 239 218 / 34%); }
.travel-stamp {
  position: absolute;
  top: 21px;
  right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 36px);
  padding: 9px 12px;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: 99px;
  background: rgb(255 250 241 / 91%);
  color: #664222;
  box-shadow: 0 5px 16px rgb(9 40 51 / 7%);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
}
.travel-stamp svg { width: 15px; height: 15px; color: #a85518; }
.hero-orbit {
  position: absolute;
  pointer-events: none;
  width: 100px;
  height: 100px;
  border: 1px solid rgb(255 250 241 / 25%);
  border-radius: 50%;
  top: 70px;
  left: -40px;
  z-index: 1;
}
.trip-brief {
  padding: 23px 21px;
  border-radius: 19px;
  border-color: #e9d7c1;
  background: linear-gradient(140deg, #fff, #fff6e9);
  box-shadow: 0 6px 24px rgb(100 67 34 / 4%);
}
.brief-title { font-size: 15px; color: #362719; }
.brief-title svg { color: #a56a35; }
.trip-brief dl { margin: 18px 0; }
.trip-brief dl > div { font-size: 12px; gap: 10px; margin: 14px 0; }
.trip-brief dt { color: #846a53; }
.trip-brief dd { color: #4a3320; overflow-wrap: anywhere; }
.trip-brief .text-button { border-top-color: #ead9c3; padding-top: 16px; min-height: 44px; color: #9a440c; }
.text-button { min-height: 44px; color: #a54b0d; font-size: 13px; }

/* Conversation and trustworthy search states. */
.messages { gap: 24px; margin-bottom: 24px; }
.message { gap: 14px; animation: message-in .28s ease-out both; }
.message-avatar {
  width: 34px;
  height: 34px;
  background: #fff0db;
  color: #a85414;
  border: 1px solid #ecd2b0;
  border-radius: 12px;
}
.message-body { font-size: 16px; line-height: 1.85; color: #44362b; }
.message.user .message-body {
  background: linear-gradient(135deg, #ffefd9, #fff2e3);
  border: 1px solid #f0d9bc;
  color: #694426;
  border-radius: 19px 19px 5px 19px;
  padding: 14px 19px;
}
.message.error .message-body { color: #9d3d1c; }
.chat-active .conversation { padding-top: 4px; }
.chat-active .compose-wrap { margin-top: 23px; }
.chat-active .messages { min-height: 120px; }
.search-progress {
  border-color: #f0d6b4;
  background: linear-gradient(120deg, #fff0da, #fff8ed);
  border-radius: 18px;
  padding: 18px;
  gap: 14px;
}
.search-progress > div { min-width: 0; }
.search-progress strong { font-size: 14px; color: #694122; }
.search-progress p { color: #806347; font-size: 12px; line-height: 1.7; }
.search-progress button { min-height: 44px; padding: 8px; font-size: 12px; color: #964510; }
.spinner { border-color: #eed1aa; border-top-color: #b55210; }
.empty-state { border-color: #e9d7c2; border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
.empty-state p { color: #7a6755; font-size: 14px; }

/* Tour cards are designed as products, including the price for the whole party. */
.results { margin-top: 37px; }
.results-header { flex-wrap: wrap; align-items: center; margin-bottom: 19px; gap: 10px 20px; }
.results-header h2 { font-size: 28px; letter-spacing: -.9px; line-height: 1.35; }
.results-header span { color: #78614d; font-size: 12px; }
.results-note { font-size: 12px; color: #7b6b5b; line-height: 1.85; }
.tour-grid { gap: 20px; }
.tour-card {
  border: 1px solid #e9ddce;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 7px 24px rgb(86 57 30 / 4%);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.tour-image { height: 184px; background: #f0e8dc; overflow: hidden; }
.tour-image img { display: block; transition: transform .7s ease; }
.favorite {
  width: 44px;
  height: 44px;
  top: 13px;
  right: 13px;
  background: rgb(255 253 249 / 96%);
  color: #785c47;
  border: 1px solid rgb(255 255 255 / 76%);
  box-shadow: 0 3px 14px rgb(42 36 31 / 13%);
}
.favorite svg { width: 20px; height: 20px; }
.favorite.selected { color: #b65310; background: #fff1de; }
.favorite.selected svg { fill: #b65310; }
.tour-rating {
  left: 13px;
  bottom: 13px;
  padding: 6px 9px;
  color: #5f430f;
  background: #fff6e5;
  border-radius: 8px;
  box-shadow: 0 3px 14px rgb(42 36 31 / 9%);
}
.tour-info { padding: 20px; }
.tour-place { color: #78614d; font-size: 12px; }
.tour-card h3 { font-size: 17px; line-height: 1.55; margin: 8px 0 12px; letter-spacing: -.25px; }
.tour-meta { font-size: 12px; line-height: 1.95; color: #7b6857; }
.tour-price { flex-wrap: wrap; gap: 5px 11px; border-top-color: #f0e3d4; margin-top: 17px; padding-top: 14px; }
.tour-price strong { font-size: 28px; line-height: 1.3; color: #422810; letter-spacing: -.9px; }
.tour-price span { color: #866d57; font-size: 11px; }
.tour-details { font-size: 12px; color: #806f61; margin-top: 13px; }
.tour-details summary { min-height: 44px; display: flex; align-items: center; }
.tour-card .primary-button { min-height: 44px; padding: 12px 10px; border-radius: 11px; font-size: 13px; }
.tour-explore { margin: 13px 0 9px; }
.photo-placeholder { background: #f8f1e7; color: #96775d; }
.results-toolbar { align-items: center; gap: 18px; margin: 16px 0 24px; }
.results-toolbar label { font-size: 12px; color: #7e624b; margin: 0; }
.results-toolbar select { min-height: 44px; font-size: 16px; border-color: #e5d3bb; color: #61442e; border-radius: 11px; }
.results-selection { gap: 10px; min-width: 0; }
.results-selection > span { font-size: 12px; color: #816c58; }
.results-selection .secondary-button { min-height: 44px; font-size: 12px; padding: 11px 13px; }
.more-results { min-height: 48px; margin-top: 27px; }
.saved-actions { flex-wrap: wrap; gap: 12px; }
.selection-link input { background: #fff9f0; border-color: #ead6bd; }

/* Forms, hotel details and flight options stay usable on small screens. */
.primary-button, .secondary-button {
  min-height: 48px;
  padding: 13px 19px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.primary-button {
  background: linear-gradient(120deg, #f58220, #ffad4d);
  color: #2f1a09;
  box-shadow: 0 5px 15px rgb(245 130 32 / 12%);
}
.secondary-button { color: #824311; background: #fff0dc; border: 1px solid #eed8ba; }
.modal {
  border-radius: 25px;
  width: min(620px, calc(100% - 36px));
  padding: 30px;
  max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border: 1px solid #e9d6bf;
  background: #fffdfa;
  color: #372a20;
  box-shadow: 0 32px 120px rgb(33 23 13 / 30%);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d1b28c #fff8ee;
}
.modal::backdrop { background: rgb(25 25 24 / 46%); backdrop-filter: blur(8px); }
.modal-wide { width: min(900px, calc(100% - 36px)); }
.modal-heading { gap: 16px; }
.modal-heading > div { min-width: 0; }
.modal h2 { font-size: 29px; letter-spacing: -.8px; margin-top: 8px; overflow-wrap: anywhere; }
.modal > p, .modal form > p { color: #7a6350; font-size: 14px; line-height: 1.85; }
.icon-button { width: 44px; height: 44px; background: #fff0dd; color: #844c20; border-radius: 13px; }
.icon-button svg { width: 20px; height: 20px; }
.form-grid { gap: 17px 15px; }
label, .form-grid label { font-size: 13px; color: #644731; gap: 9px; }
label input, label select, label textarea, .modal input, .modal select, .modal textarea {
  min-height: 49px;
  border-color: #e6d5bf;
  border-radius: 11px;
  padding: 12px;
  font-size: 16px;
  color: #4e3724;
  background: #fff;
}
label textarea { line-height: 1.7; }
input::placeholder, textarea::placeholder { color: #786858; }
.form-help { color: #866c55 !important; font-size: 12px !important; line-height: 1.8; }
.form-error { color: #9f3a19; font-size: 13px; }
.consent { font-size: 12px; color: #79624e; }
.consent input { accent-color: #ae4b0c; min-height: 19px; width: 19px; height: 19px; }
.rooms-editor fieldset { border-color: #e6cda9; background: #fff8ed; border-radius: 15px; gap: 14px; padding: 15px; }
.rooms-editor legend { color: #875c37; font-weight: 700; font-size: 13px; }
.rooms-editor label { min-width: 0; }
.child-ages { flex-wrap: wrap; gap: 12px; }
.child-ages label { flex: 1 1 100px; min-width: 0; }
.detail-tabs {
  gap: 5px;
  padding: 6px;
  border: 1px solid #f1e2ce;
  border-radius: 15px;
  background: #fff1de;
}
.detail-tabs button { min-height: 45px; font-size: 13px; color: #87613f; padding: 10px 9px; border-radius: 11px; }
.detail-tabs button[aria-selected="true"] { color: #713604; background: #fff; box-shadow: 0 3px 10px rgb(92 59 20 / 8%); }
.detail-loading { color: #745238; min-height: 170px; }
.hotel-gallery { max-height: 410px; border-radius: 17px; gap: 10px; }
.hotel-gallery a { min-width: 0; }
.hotel-gallery img { height: 180px; border-radius: 14px; }
.hotel-gallery a:first-child img { height: 250px; }
.hotel-links { gap: 10px; margin: 20px 0; }
.hotel-links a { min-height: 44px; }
.hotel-sections details { border-bottom-color: #ead8c1; padding: 15px 0; }
.hotel-sections summary { color: #67472e; min-height: 44px; display: flex; align-items: center; font-size: 14px; }
.hotel-sections p { color: #78614d; font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.detail-footer { border-top-color: #ead8c1; gap: 17px; margin-top: 27px; padding-top: 23px; }
.detail-footer p { font-size: 12px; line-height: 1.8; color: #84694f; }
.verified-price { background: #f2f7ea; border-color: #d4dfbf; border-radius: 20px; padding: 30px 22px; }
.verified-price > span { color: #4e642c; font-weight: 700; font-size: 12px; }
.verified-price > strong { color: #334817; font-size: 40px; letter-spacing: -1.3px; }
.verified-price p { font-size: 14px; color: #526436; }
.verified-price small { color: #617347; }
.flight-options { gap: 17px; }
.flight-option { padding: 22px; border-color: #e5d2b8; border-radius: 20px; background: #fff; }
.flight-direction > strong { color: #95633a; font-size: 10px; letter-spacing: 1.2px; }
.flight-leg > span { color: #78654e; font-size: 13px; line-height: 1.7; }
.flight-leg > div { gap: 16px; flex-wrap: wrap; }
.flight-leg b { font-size: 25px; letter-spacing: -.6px; color: #49311e; }
.flight-leg small { color: #8a715b; line-height: 1.7; }
.flight-total { border-top-color: #ebddcc; padding-top: 16px; }
.flight-total strong { font-size: 24px; color: #694012; }
.flight-total small { font-size: 12px; line-height: 1.6; color: #866a4d; }
.flight-total button.selected { color: #36551d; background: #ecf4df; border-color: #ccd9b1; }
.toast {
  left: calc(50% + var(--rail-width) / 2);
  bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: min(600px, calc(100vw - var(--rail-width) - 44px));
  width: max-content;
  padding: 14px 19px;
  background: #25333b;
  color: #fff6e8;
  border: 1px solid #42505b;
  border-radius: 14px;
  font-size: 13px;
  box-shadow: 0 7px 30px rgb(24 40 52 / 18%);
  overflow-wrap: anywhere;
}

/* Quiet editorial sections below the product. */
.how-section, .faq-section {
  margin: 0 var(--page-gutter);
  padding: 58px 0;
  border-top-color: #e6d8c6;
  grid-template-columns: 1fr 1.3fr;
  gap: 54px;
}
.section-intro h2, .faq-section h2 { color: #4a301a; font-size: 32px; line-height: 1.35; letter-spacing: -1.1px; font-weight: 700; }
.section-intro p, .faq-section > div > p { color: #8a6f54; font-size: 14px; line-height: 1.9; }
.how-steps { gap: 27px; }
.how-steps article { gap: 19px; align-items: flex-start; }
.how-steps article > span {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: none;
  border-radius: 12px;
  border: 1px solid #f0d7b8;
  background: #fff0da;
  color: #a44f12;
  font-size: 12px;
  font-weight: 800;
}
.how-steps h3 { font-size: 16px; color: #55351b; margin-top: 3px; }
.how-steps p { color: #78614d; font-size: 14px; }
.faq-list details { border-bottom-color: #e9d8c3; }
.faq-list details:first-child { border-top-color: #e9d8c3; }
.faq-list summary { padding: 20px 2px; color: #6b492c; font-size: 14px; line-height: 1.8; gap: 18px; }
.faq-list summary span { color: #af5a19; transition: transform .2s ease; }
.faq-list details p { color: #836950; font-size: 14px; line-height: 1.9; }
footer { margin: 0 var(--page-gutter); border-top-color: #e6d8c6; padding: 30px 0; align-items: center; }
footer strong { font-size: 22px; color: #50341c; }
footer strong span { color: #aa4b0b; }
footer p, footer a, footer small { color: #78614d; font-size: 11px; line-height: 1.8; }
footer > div:last-child { flex-wrap: wrap; justify-content: flex-end; }

/* Animation never controls whether content is visible. */
.welcome, .inspiration, .motion-reveal.is-revealed { animation: scene-in .55s ease-out both; }
.inspiration { animation-delay: .08s; }
@keyframes scene-in {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}
@keyframes message-in {
  from { transform: translateY(6px); }
  to { transform: translateY(0); }
}
@keyframes status-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.82); }
}
@media (hover: hover) and (pointer: fine) {
  .new-trip:hover, .primary-button:hover, .send-button:hover {
    background: linear-gradient(120deg, #ff973c, #ffc06a);
    color: #2f1a09;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(245 130 32 / 20%);
  }
  .secondary-button:hover, .parameters-button:hover, .icon-button:hover { background: #ffe4c0; }
  .nav-item:hover { border-color: rgb(255 173 77 / 18%); background: rgb(255 255 255 / 7%); }
  .suggestions button:hover { transform: translateY(-3px); border-color: #dba868; box-shadow: 0 10px 24px rgb(136 81 24 / 8%); }
  .tour-card:hover { transform: translateY(-4px); border-color: #dfbc8f; box-shadow: 0 15px 34px rgb(100 65 30 / 11%); }
  .tour-card:hover .tour-image img { transform: scale(1.035); }
  .travel-visual:hover img { transform: scale(1.025); }
  .favorite:hover { background: #fff0d9; }
  .top-human:hover { background: #ffe9ca; }
  .faq-list summary:hover { color: #9e490d; }
}

/* Wide screens use the available space without oversized text or long lines. */
@media (min-width: 1700px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 340px; }
  .tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .travel-visual { height: 525px; }
  .welcome-copy { max-width: 630px; }
}
@media (max-width: 1390px) {
  :root { --rail-width: 226px; --page-gutter: 32px; }
  .sidebar { padding-right: 17px; padding-left: 17px; }
  .brand { font-size: 21px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; }
  .travel-visual { height: 465px; }
  .travel-visual p { font-size: 28px; }
  .travel-visual em { font-size: 43px; }
  .composer-hint { display: none; }
  .composer-footer { justify-content: space-between; }
  .topbar { gap: 12px; }
  .topbar-title { font-size: 11px; }
  .suggestions button { padding: 15px 12px; }
}
@media (max-width: 1199px) {
  .workspace { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
  .inspiration { display: none; }
  .welcome h1 { font-size: clamp(51px, 5.8vw, 68px); }
  .how-section, .faq-section { grid-template-columns: 1fr; gap: 28px; }
  .section-intro h2 br, .faq-section h2 br { display: none; }
  .section-intro p { display: block; }
  .topbar-title { display: none; }
  .departure { margin-left: 0; }
  .top-human { margin-left: auto; }
  .suggestions button { min-height: 106px; }
  footer > div:last-child { gap: 12px; }
}

/* Tablets have a full-width workspace and a compact two-row navigation. */
@media (max-width: 900px) {
  :root { --rail-width: 0px; --page-gutter: 30px; }
  .sidebar {
    inset: 0 0 auto;
    width: 100%;
    height: calc(138px + env(safe-area-inset-top));
    padding: calc(14px + env(safe-area-inset-top)) 24px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 44px;
    align-items: center;
    gap: 10px 20px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgb(255 173 77 / 16%);
    box-shadow: 0 6px 24px rgb(24 42 52 / 9%);
  }
  .brand { font-size: 23px; grid-column: 1; }
  .brand-symbol { width: 33px; height: 36px; }
  .brand-symbol svg { width: 34px; height: 34px; }
  .brand-sub { font-size: 8px; }
  .new-trip { width: auto; min-height: 44px; margin: 0; padding: 10px 15px; border-radius: 11px; font-size: 12px; grid-column: 2; grid-row: 1; }
  .main-nav { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; order: unset; }
  .main-nav .nav-item { display: flex; font-size: 12px; gap: 7px; min-height: 44px; padding: 9px 11px; border-radius: 10px; white-space: nowrap; }
  .main-nav #saved-open { display: flex; font-size: 12px; background: transparent; padding: 9px 11px; gap: 7px; }
  .main-nav #saved-open svg { width: 18px; height: 18px; }
  .nav-item svg { width: 18px; height: 18px; }
  .saved-count { font-size: 11px; padding: 1px 5px; background: #334450; }
  .nav-pill { display: none; }
  .nav-item small { font-size: 14px; }
  .sidebar-note, .sidebar-bottom { display: none; }
  .page { margin: calc(138px + env(safe-area-inset-top)) 0 0; }
  .topbar { height: 66px; font-size: 12px; }
  .departure { font-size: 12px; }
  .top-human { font-size: 12px; }
  .workspace { padding-top: 35px; gap: 0; }
  .conversation { padding-top: 0; }
  .welcome h1 { font-size: clamp(48px, 7vw, 64px); }
  .eyebrow { font-size: 10px; }
  .welcome-copy { font-size: 16px; }
  .tour-grid, .selection-page .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-image { height: 190px; }
  .results-toolbar { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .results-toolbar label { flex: 1 1 180px; max-width: 270px; }
  .results-selection { flex: 1 1 250px; justify-content: flex-end; }
  .detail-footer { flex-direction: row; }
  .flight-total { flex-direction: row; align-items: center; }
  .toast { left: 50%; max-width: calc(100vw - 36px); }
  .skip { left: 15px; }
}

/* Phones retain a simple header and let the page scroll naturally with the keyboard. */
@media (max-width: 640px) {
  :root { --page-gutter: 22px; --radius-card: 21px; }
  .sidebar {
    height: calc(79px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    grid-template-rows: 44px;
    gap: 9px;
  }
  .brand { font-size: 22px; gap: 7px; letter-spacing: -1.1px; }
  .brand-symbol { width: 29px; height: 34px; }
  .brand-symbol svg { width: 31px; height: 31px; }
  .brand-sub { font-size: 7px; letter-spacing: 1.1px; }
  .new-trip { grid-column: 2; width: 44px; height: 44px; min-height: 44px; font-size: 0; padding: 0; gap: 0; }
  .new-trip svg { width: 22px; height: 22px; }
  .main-nav { display: contents; }
  .main-nav .nav-item { display: none; }
  .main-nav #saved-open {
    grid-column: 3;
    grid-row: 1;
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    position: relative;
    gap: 0;
    border: 1px solid rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 5%);
    border-radius: 11px;
  }
  .main-nav #saved-open svg { width: 21px; height: 21px; color: #ffe0b8; }
  .saved-count { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 1px 4px; background: #ffe2b9; color: #674218; font-size: 10px; border-radius: 6px; }
  .page { margin-top: calc(79px + env(safe-area-inset-top)); }
  .topbar { height: auto; min-height: 63px; margin: 0 var(--page-gutter); padding: 9px 0; gap: 10px; }
  .departure { font-size: 10px; white-space: normal; gap: 5px; line-height: 1.5; }
  .departure svg { width: 13px; height: 13px; }
  .top-human { font-size: 10px; min-height: 44px; padding: 8px 10px; border-radius: 9px; max-width: 150px; }
  .top-human span { display: none; }
  .workspace { padding: 29px var(--page-gutter) 41px; }
  .welcome { margin-bottom: 25px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.05px; line-height: 1.6; }
  .hero-status { font-size: 10px; padding: 6px 10px; margin: 0 0 17px; }
  .welcome h1 { font-size: clamp(39px, 10.5vw, 57px); line-height: 1.13; letter-spacing: -.055em; margin: 19px 0 18px; }
  .welcome-copy { font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
  .desktop-break { display: none; }
  .brand-strip { font-size: 10px; gap: 7px 13px; margin-bottom: 22px; }
  .brand-strip svg { width: 13px; height: 13px; }
  .suggestions { grid-template-columns: 1fr 1fr; gap: 9px; }
  .suggestions button { min-height: 56px; flex-direction: row; align-items: center; gap: 9px; padding: 11px 10px; border-radius: 13px; }
  .suggestions button:last-child { grid-column: 1 / -1; }
  .suggestions button > span { font-size: 12px; line-height: 1.55; }
  .suggestions button > svg { width: 16px; height: 16px; padding: 7px; border-radius: 9px; }
  .suggestions .suggest-arrow { display: none; }
  .suggestions button:last-child .suggest-arrow { display: block; position: static; margin-left: auto; }
  .composer { padding: 17px 15px 13px; border-radius: 18px; }
  .composer textarea { font-size: 16px; min-height: 69px; line-height: 1.65; }
  .composer-footer { margin-top: 9px; gap: 8px; }
  .parameters-button { font-size: 11px; padding: 9px 10px; min-height: 44px; border-radius: 10px; }
  .send-button { width: 44px; height: 44px; border-radius: 12px; }
  .compose-caption { font-size: 10px; line-height: 1.8; align-items: flex-start; margin-top: 13px; }
  .compose-caption svg { margin-top: 3px; }
  .chat-privacy { font-size: 10px; line-height: 1.8; }
  .chat-active .compose-wrap { position: relative; margin-top: 22px; }
  .message { gap: 10px; }
  .message-avatar { width: 30px; height: 30px; border-radius: 10px; }
  .message-body, .message.user .message-body { font-size: 15px; line-height: 1.8; }
  .message.user .message-body { padding: 12px 15px; max-width: 93%; }
  .search-progress { gap: 11px; padding: 15px; flex-wrap: wrap; }
  .search-progress > div { flex: 1 1 150px; }
  .search-progress strong { font-size: 13px; }
  .search-progress p { font-size: 11px; }
  .search-progress button { margin-left: auto; }
  .results { margin-top: 31px; }
  .results-header h2 { font-size: 26px; }
  .results-header span { font-size: 11px; }
  .results-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .results-toolbar label, .results-selection { flex: initial; max-width: none; }
  .results-selection { justify-content: flex-start; }
  .results-note { font-size: 12px; }
  .tour-grid, .selection-page .tour-grid { grid-template-columns: 1fr; gap: 20px; }
  .tour-image { height: clamp(182px, 52vw, 255px); }
  .tour-info { padding: 19px; }
  .tour-card h3 { font-size: 18px; }
  .tour-place, .tour-meta { font-size: 12px; }
  .tour-price strong { font-size: 29px; }
  .tour-price span { font-size: 11px; }
  .tour-card .primary-button { min-height: 46px; font-size: 14px; }
  .favorite { width: 44px; height: 44px; }
  .empty-state { padding: 23px; }
  .modal, .modal-wide { width: calc(100% - 22px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 23px 19px; border-radius: 21px; }
  .modal h2 { font-size: 25px; line-height: 1.35; letter-spacing: -.8px; }
  .modal .eyebrow { font-size: 9px; }
  .modal > p, .modal form > p { font-size: 14px; }
  .modal-heading { gap: 11px; }
  .icon-button { width: 44px; height: 44px; }
  .form-grid { gap: 16px 12px; }
  .form-grid label { font-size: 12px; }
  .form-grid input, .form-grid select, .modal input, .modal select, .modal textarea { font-size: 16px; min-height: 49px; }
  .consent input { min-height: 19px; }
  .detail-tabs { margin: 20px 0; gap: 3px; padding: 4px; }
  .detail-tabs button { font-size: 11px; min-height: 45px; padding: 10px 5px; }
  .hotel-gallery { max-height: 330px; gap: 8px; }
  .hotel-gallery img { height: 120px; border-radius: 10px; }
  .hotel-gallery a:first-child img { height: 200px; }
  .hotel-links { margin: 17px 0; }
  .hotel-links a { flex: 1 1 auto; font-size: 12px; padding: 11px 10px; }
  .hotel-sections summary { font-size: 14px; }
  .detail-footer { flex-direction: column; align-items: stretch; gap: 9px; }
  .detail-footer p { margin: 5px 0 0; text-align: center; }
  .verified-price { padding: 25px 17px; }
  .verified-price > strong { font-size: 34px; }
  .flight-option { padding: 17px; border-radius: 17px; }
  .flight-leg > div { gap: 10px; }
  .flight-leg b { font-size: 22px; }
  .flight-total { flex-direction: column; align-items: stretch; gap: 13px; }
  .flight-total strong { font-size: 24px; }
  .saved-actions { align-items: stretch; flex-direction: column; }
  .saved-actions > button { width: 100%; }
  .how-section, .faq-section { padding: 39px 0; gap: 25px; }
  .section-intro h2, .faq-section h2 { font-size: 28px; margin-top: 13px; }
  .section-intro p, .faq-section > div > p { font-size: 14px; }
  .how-steps { gap: 25px; }
  .how-steps article { gap: 15px; }
  .how-steps article > span { width: 35px; height: 35px; border-radius: 10px; }
  .how-steps h3 { font-size: 16px; }
  .how-steps p, .faq-list details p { font-size: 14px; }
  .faq-list summary { font-size: 14px; padding: 19px 0; }
  footer { flex-direction: column; align-items: flex-start; gap: 19px; padding: 27px 0 calc(29px + env(safe-area-inset-bottom)); }
  footer > div:last-child { justify-content: flex-start; align-items: center; flex-direction: row; gap: 10px 17px; }
  footer p, footer a, footer small { font-size: 11px; }
  .toast { bottom: calc(17px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); padding: 13px 16px; font-size: 12px; }
}
@media (max-width: 540px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .rooms-editor fieldset { grid-template-columns: minmax(0, 1fr); }
  .rooms-editor .child-ages { grid-column: 1; }
}
@media (max-width: 360px) {
  :root { --page-gutter: 16px; }
  .sidebar { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .brand { font-size: 20px; gap: 5px; }
  .brand-symbol { width: 26px; }
  .brand-symbol svg { width: 27px; height: 27px; }
  .brand-sub { font-size: 6px; letter-spacing: .9px; }
  .top-human { max-width: 127px; font-size: 9px; padding: 8px; }
  .departure { font-size: 9px; }
  .welcome h1 { font-size: 38px; }
  .hero-status { font-size: 9px; }
  .brand-strip { gap: 6px 10px; font-size: 9px; }
  .suggestions button { padding: 10px 8px; gap: 7px; }
  .suggestions button > span { font-size: 11px; }
  .suggestions button > svg { padding: 5px; width: 15px; height: 15px; }
  .composer { padding: 16px 13px 12px; }
  .parameters-button { font-size: 10px; padding: 9px 8px; }
  .modal, .modal-wide { padding: 20px 16px; }
  .modal h2 { font-size: 23px; }
  .detail-tabs button { font-size: 10px; padding-right: 3px; padding-left: 3px; }
  .hotel-gallery a:first-child img { height: 170px; }
  .tour-info { padding: 17px; }
  .tour-price strong { font-size: 27px; }
}

/* Shared selections and embedded chat honour their own, smaller layout. */
.selection-page .workspace { max-width: 1500px; padding-top: 32px; }
.selection-page .results-header h2 { font-size: clamp(30px, 3.3vw, 43px); }
.selection-page .tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .selection-page .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .selection-page .tour-grid { grid-template-columns: minmax(0, 1fr); } }
.embed-page { background: #fffaf4; }
.embed-page .page { margin: 0; }
.embed-page .workspace { padding: 24px 19px 14px; }
.embed-page .welcome h1 { font-size: clamp(31px, 8.5vw, 42px); margin: 17px 0; }
.embed-page .welcome-copy { font-size: 14px; }
.embed-page .hero-status { font-size: 9px; }
.embed-page .brand-strip { font-size: 9px; gap: 6px 11px; }
.embed-page .compose-wrap { position: relative; padding: 0; background: transparent; margin-top: 20px; }
.embed-page .composer textarea { font-size: 16px; }
.embed-page .modal input, .embed-page .modal select, .embed-page .modal textarea { font-size: 16px; }
.embed-page .form-grid { grid-template-columns: minmax(0, 1fr); }
.embed-page .tour-grid { grid-template-columns: minmax(0, 1fr); }
.embed-page .tour-info h3 { font-size: 17px; }
.embed-page .messages { gap: 20px; }
.embed-page .message-body { font-size: 15px; }
.embed-page .toast { left: 50%; max-width: calc(100vw - 28px); }
.embed-page .suggestions { grid-template-columns: 1fr 1fr; }
.embed-page .suggestions button:last-child { grid-column: 1 / -1; }

/* Insets also protect landscape screens with a camera cutout. */
@media (hover: none), (pointer: coarse) {
  .new-trip:hover, .primary-button:hover, .send-button:hover { background: linear-gradient(120deg, #f58220, #ffad4d); color: #2f1a09; transform: none; }
  .suggestions button:hover, .tour-card:hover, .tour-image img:hover { transform: none; }
}
.workspace { padding-left: max(var(--page-gutter), env(safe-area-inset-left)); padding-right: max(var(--page-gutter), env(safe-area-inset-right)); }
.topbar, footer { margin-left: max(var(--page-gutter), env(safe-area-inset-left)); margin-right: max(var(--page-gutter), env(safe-area-inset-right)); }
@media (max-width: 900px) {
  .sidebar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
}
@media (max-width: 640px) {
  .sidebar { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
}
@media (max-width: 360px) {
  .sidebar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
.embed-page .workspace { padding-left: max(19px, env(safe-area-inset-left)); padding-right: max(19px, env(safe-area-inset-right)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  .topbar-title, .welcome-copy, .compose-caption, .chat-privacy, .tour-meta,
  .tour-place, .results-note, .how-steps p, .faq-list details p, footer p,
  footer a, footer small { color: #624b36; }
  .tour-card, .suggestions button, .trip-brief, .composer { border-color: #9b754f; }
}