/*
 * Traveler pages only (index, trip, book, pay, confirmed). Uses the tokens and components of base.css;
 * defines no token and restyles no shared class. Plan: web/DESIGN.md.
 */

/* ---------------------------------------------------------------- company bar and footer */
.site-bar { position: sticky; top: 0; z-index: 20; background: var(--royal); color: #fff; border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff), var(--accent)) 1; }
.site-bar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--s5); min-height: 4rem; }
.site-bar__brand { display: inline-flex; align-items: center; gap: var(--s3); min-height: var(--touch); color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); line-height: 1.1; letter-spacing: -0.01em; }
.site-bar__brand:focus-visible, .site-bar__nav a:focus-visible, .site-foot a:focus-visible, .hero__btn:focus-visible, .talk a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-bar__logo { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.site-bar__nav { display: flex; align-items: center; gap: var(--s5); width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s1); }
.site-bar__nav::-webkit-scrollbar { display: none; }
.site-bar__nav:empty { display: none; }
.site-bar__nav a { position: relative; display: inline-flex; align-items: center; flex: none; min-height: var(--touch); color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.site-bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.site-bar__nav a:hover { color: #fff; }
.site-bar__nav a[aria-current="page"] { color: #fff; }
.site-bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-bar__nav a:hover::after, .site-bar__nav a:focus-visible::after { transform: scaleX(1); }
@media (min-width: 40rem) {
  .site-bar__nav { width: auto; padding-bottom: 0; overflow: visible; }
}
.site-foot { margin-top: var(--s8); border-top: 3px solid; border-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff), var(--accent)) 1; background: var(--royal); color: #fff; padding-block: var(--s7); scroll-margin-top: 5rem; }
.site-foot__in { display: grid; gap: 0; }
.site-foot a { color: #fff; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.foot__brand { display: inline-flex; align-items: center; gap: var(--s3); min-height: var(--touch); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3); letter-spacing: -0.01em; line-height: 1.1; text-decoration: none; }
.site-foot .foot__brand { text-decoration: none; }
.foot__logo { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px var(--accent); }
.foot__socials { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.site-foot .foot__social { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; color: #fff; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
.site-foot .foot__social:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: translateY(-2px); }
.site-foot .foot__social:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.foot__social .icon { width: 1.3rem; height: 1.3rem; }
.foot__cols { display: grid; gap: var(--s6); padding-block: var(--s6); }
@media (min-width: 48rem) { .foot__cols { grid-template-columns: repeat(3, 1fr); gap: var(--s7); padding-block: var(--s7); } }
.foot__col h2 { margin: 0 0 var(--s4); font-size: var(--fs-1); font-weight: 700; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.foot__links { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.foot__links a { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
.foot__line { display: flex; align-items: flex-start; gap: var(--s3); margin: 0 0 var(--s3); line-height: 1.5; }
.foot__line .icon { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.3rem; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.foot__phone { font-weight: 700; font-variant-numeric: tabular-nums; }
.foot__base { display: grid; gap: var(--s2); justify-items: center; text-align: center; padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); }
.foot__legal, .foot__made { margin: 0; }
.foot__made { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.62); }
@media (min-width: 48rem) { .foot__base { grid-auto-flow: column; justify-content: space-between; justify-items: start; text-align: left; } }

/* floating WhatsApp button */
.chat-fab { position: fixed; right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-width: 3.5rem; min-height: 3.5rem; padding: 0 1rem; border-radius: 999px; background: #1a9e4f; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.95); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s; }
.chat-fab:hover { background: #148040; }
.chat-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.chat-fab.is-hidden { opacity: 0; transform: translateY(1rem) scale(0.9); pointer-events: none; }
.chat-fab .icon { width: 1.8rem; height: 1.8rem; flex: none; }
.chat-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 40rem) {
  .chat-fab { right: var(--s5); bottom: calc(var(--s5) + env(safe-area-inset-bottom)); padding: 0 1.4rem 0 1.1rem; }
  .chat-fab__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (max-width: 63.99rem) { body:has(.buy-bar) .chat-fab { bottom: calc(6rem + env(safe-area-inset-bottom)); } }
@media (max-width: 47.99rem) { body:has(.action-bar--mobile) .chat-fab { bottom: calc(6rem + env(safe-area-inset-bottom)); } }
.page-main { padding-block: var(--s5) var(--s6); }
.crumb { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: 600; }

/* ---------------------------------------------------------------- trip list */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(26rem, 68vh, 38rem); background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--brand) 70%, #fff) 0%, var(--royal) 70%); color: #fff; overflow: hidden; }
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide.is-active, .hero__slide.is-leaving { animation: hero-drift 6s ease-out forwards; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.04); } }
.hero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 10, 18, 0.88) 0%, rgba(8, 10, 18, 0.55) 45%, rgba(8, 10, 18, 0.3) 100%); }
.hero__dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; gap: 0.15rem; }
.hero__dot { position: relative; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.hero__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.6rem; height: 0.6rem; border: 2px solid #fff; border-radius: 999px; background: transparent; transform: translate(-50%, -50%); transition: width 0.2s, background-color 0.2s; }
.hero__dot[aria-current="true"]::before { width: 1.6rem; border-color: var(--accent); background: var(--accent); }
.hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hero--dots .hero__body { padding-bottom: calc(var(--s6) + 1.5rem); }
@media (prefers-reduced-motion: reduce) { .hero__dot::before { transition: none; } }
.hero__body { position: relative; z-index: 1; display: grid; gap: var(--s4); justify-items: start; padding: var(--s7) var(--s5) var(--s6); }
.hero::before { content: ""; position: absolute; inset: 0.5rem; z-index: 1; pointer-events: none; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.hero__rule { width: 4.5rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff)); }
.hero h1 { max-width: 18ch; font-size: clamp(2.1rem, 7vw, 3.9rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; color: #fff; text-wrap: balance; }
.hero__sub { max-width: 40ch; font-size: var(--fs-2); color: rgba(255, 255, 255, 0.92); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__btn { background: #fff; color: var(--ink); border-color: #fff; font-weight: 700; padding-inline: var(--s5); }
.hero__btn:hover { background: var(--wash); border-color: var(--accent); }
.hero__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.hero__btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s2) 0 0; padding: 0; list-style: none; }
.hero__facts:empty { display: none; }
.hero__fact-link { color: #fff; text-decoration: none; }
.hero__facts li:has(.hero__fact-link) { padding: 0; }
.hero__fact-link { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; transition: background-color 0.15s; }
.hero__fact-link:hover { background: rgba(255, 255, 255, 0.22); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.hero__fact-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero__facts li { padding: 0.3rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.95rem; backdrop-filter: blur(4px); }
@media (min-width: 48rem) {
  .hero__body { padding-block: var(--s8) calc(var(--s8) + var(--s5)); }
  .hero--dots .hero__body { padding-bottom: calc(var(--s8) + var(--s5) + 1.5rem); }
  .hero__dots { bottom: 1.75rem; }
  .hero::before { inset: 1rem; }
}
.finder { position: relative; z-index: 2; display: grid; gap: var(--s4); margin-top: var(--s5); padding: var(--s5); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -18px rgba(10, 14, 30, 0.35); }
@media (min-width: 48rem) { .finder { margin-top: calc(-1 * var(--s8)); padding: var(--s5) var(--s6); } }
.finder .field__label { font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.finder .input { min-height: 3rem; }
.finder__main { position: relative; display: grid; gap: var(--s3); align-items: end; }
@media (min-width: 48rem) { .finder__main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto; gap: var(--s4); } }
.finder__go { min-height: 3rem; padding-inline: var(--s6); font-size: 1.05rem; }
.finder__go .icon { width: 1.2rem; height: 1.2rem; flex: none; }

/* "Where to?" list */
.suggest { position: relative; }
.suggest .input { width: 100%; padding-right: 3rem; }
.suggest__toggle { position: absolute; right: 0.3rem; top: 50%; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; transform: translateY(-50%); border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.suggest__toggle:hover { background: var(--wash); }
.suggest__toggle .icon { width: 1.2rem; height: 1.2rem; transition: transform 0.2s ease; }
.suggest.is-open .suggest__toggle .icon { transform: rotate(180deg); }
.suggest__list { position: absolute; z-index: 45; top: calc(100% + 0.4rem); left: 0; right: 0; max-height: 22rem; margin: 0; padding: var(--s2); overflow-y: auto; list-style: none; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -16px rgba(10, 14, 30, 0.45); }
.suggest__list[hidden] { display: none; }
.suggest__title { padding: var(--s2) var(--s3); font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.suggest__item { display: flex; align-items: center; gap: var(--s3); min-height: var(--touch); padding: 0.3rem var(--s3); border-radius: var(--radius); cursor: pointer; }
.suggest__item .icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--brand-strong); }
.suggest__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.suggest__count { flex: none; font-size: 0.8rem; color: var(--ink-soft); }
.suggest__item.is-active { background: color-mix(in srgb, var(--accent) 20%, var(--paper)); }
.suggest__none { padding: var(--s3); font-size: 0.95rem; color: var(--ink-soft); }

/* travel-dates picker */
.picker__input { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; cursor: pointer; }
.picker__input .icon { width: 1.2rem; height: 1.2rem; flex: none; color: var(--brand-strong); }
.picker__text { font-variant-numeric: tabular-nums; }
.picker__text.is-empty { color: var(--ink-soft); }
.picker__pop { position: absolute; z-index: 50; top: calc(100% + 0.5rem); left: 0; width: min(44rem, 100%); padding: var(--s4); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -16px rgba(10, 14, 30, 0.45); }
.picker__pop[hidden] { display: none; }
.picker__months { display: grid; gap: var(--s5); }
@media (min-width: 40rem) { .picker__months { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.picker__head { display: grid; grid-template-columns: var(--touch) 1fr var(--touch); align-items: center; margin-bottom: var(--s2); }
.picker__title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.picker__nav { display: grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.picker__nav:hover:not(:disabled) { background: var(--wash); }
.picker__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.picker__nav:focus-visible { outline: var(--ring); outline-offset: 1px; }
.picker__nav .icon { width: 1.3rem; height: 1.3rem; }
.picker__weekdays, .picker__days { display: grid; grid-template-columns: repeat(7, 1fr); }
.picker__weekdays span { padding-block: var(--s2); text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.picker__day { display: grid; place-items: center; height: 2.6rem; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
.picker__day--out { color: #9aa1b0; cursor: default; }
.picker__day:disabled { color: #b4bac6; cursor: not-allowed; }
.picker__day:hover:not(:disabled):not(.is-start):not(.is-end) { background: var(--wash); border-radius: 8px; }
.picker__day.is-between { background: color-mix(in srgb, var(--accent) 22%, var(--paper)); border-radius: 0; }
.picker__day.is-start, .picker__day.is-end { background: var(--royal); color: #fff; font-weight: 700; }
.picker__day.is-start { border-radius: 8px 0 0 8px; }
.picker__day.is-end { border-radius: 0 8px 8px 0; }
.picker__day.is-start.is-end, .picker__day.is-start:not(.is-end):not(.is-between) { border-radius: 8px; }
.picker__day.is-today:not(.is-start):not(.is-end) { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 8px; }
.picker__day:focus-visible { outline: var(--ring); outline-offset: -2px; position: relative; z-index: 1; }
.picker__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.picker__hint { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

/* filters in use */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.chip--remove { min-height: 2.5rem; gap: var(--s2); padding: 0 var(--s3) 0 var(--s4); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--paper)); cursor: pointer; }
.chip--remove:hover { background: color-mix(in srgb, var(--accent) 28%, var(--paper)); }
.chip--remove .icon { width: 1rem; height: 1rem; flex: none; }

.trips-section { scroll-margin-top: 7rem; padding-top: var(--s7); }
.how, .story, .talk { scroll-margin-top: 7rem; }
.section-head { display: grid; justify-items: center; gap: var(--s2); text-align: center; margin-bottom: var(--s6); }
.section-head h2 { font-size: var(--fs-4); letter-spacing: -0.01em; }
.section-head p { margin: 0; }
.section-head::after { content: "◆"; order: 3; width: 9rem; color: var(--accent); font-size: 0.7rem; line-height: 1; text-align: center; background: linear-gradient(var(--accent), var(--accent)) left center / 3.5rem 2px no-repeat, linear-gradient(var(--accent), var(--accent)) right center / 3.5rem 2px no-repeat; }
.section-head--left { justify-items: start; text-align: left; margin-bottom: var(--s4); }
.section-head--left::after { width: 4.5rem; text-align: left; font-size: 0; height: 3px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff)); }

.tiles { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(20, 24, 40, 0.06), 0 14px 28px -18px rgba(20, 24, 40, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 2px 4px rgba(20, 24, 40, 0.06), 0 24px 40px -20px rgba(20, 24, 40, 0.4); }
.tile:focus-within { outline: var(--ring); outline-offset: 3px; }
.tile__media { position: relative; overflow: hidden; background: var(--royal); }
.tile__photo { display: block; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: linear-gradient(135deg, var(--brand), var(--royal)); transition: transform 0.5s ease; }
.tile:hover .tile__photo { transform: scale(1.05); }
.tile__tag, .tile__flag { position: absolute; top: var(--s3); padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; line-height: 1.4; }
.tile__tag { left: var(--s3); background: rgba(10, 12, 20, 0.8); color: #fff; border: 1px solid var(--accent); }
.tile__flag { right: var(--s3); background: #fff; color: var(--ink); border: 1px solid var(--accent); }
.tile__body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding: var(--s4) var(--s5) var(--s5); }
.tile__title { font-size: var(--fs-2); line-height: 1.2; letter-spacing: -0.01em; }
.tile__title a { color: var(--ink); text-decoration: none; }
.tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile__title a:focus-visible { outline: none; }
.tile__meta { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.tile__meta .icon { width: 1rem; height: 1rem; flex: none; color: var(--brand-strong); }
.tile__route { display: grid; grid-template-columns: minmax(0, auto) minmax(1.5rem, 1fr) minmax(0, auto); align-items: center; gap: var(--s2); margin: 0; padding: var(--s3) var(--s3); background: color-mix(in srgb, var(--brand) 7%, var(--paper)); border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line)); border-radius: var(--radius); }
.tile__route--single { display: flex; gap: var(--s2); }
.tile__route--single .icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--brand-strong); }
.route__stop { display: grid; gap: 0.1rem; min-width: 0; line-height: 1.25; }
.route__stop strong { font-size: 0.98rem; overflow-wrap: anywhere; }
.route__stop--end { text-align: right; }
.route__label { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); }
.route__stop:not(.route__stop--end) .route__label::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.35rem; border: 2px solid var(--accent); border-radius: 50%; background: var(--paper); vertical-align: -1px; }
.route__line { position: relative; align-self: center; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 13px); }
.route__mark { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; transform: translate(-50%, -50%) rotate(45deg); border-radius: 50%; background: var(--royal); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 7%, var(--paper)); }
.route__mark .icon { width: 0.85rem; height: 0.85rem; }
.tile__desc { margin: 0; font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile__next { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.tile__next strong { color: var(--ink); }
.tile__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s3); border-top: 1px dashed var(--line-strong); }
.tile__price { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2); color: var(--accent-strong); line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.tile__price small { font-family: var(--font-text); font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }
.tile__advance { margin: var(--s1) 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.tile__go { flex: none; padding: 0.5rem 1rem; border-radius: var(--radius); background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 0.9rem; transition: background-color 0.15s; }
.tile:hover .tile__go { background: color-mix(in srgb, var(--brand) 82%, black); }
@media (min-width: 48rem) {
  .tile--lead { grid-column: span 2; }
  .tile--lead .tile__photo { aspect-ratio: 16 / 9; }
  .tile--lead .tile__title { font-size: var(--fs-3); }
}

.how { margin-top: var(--s8); }
.how__steps { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; counter-reset: how; }
@media (min-width: 48rem) { .how__steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.how__steps li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); row-gap: var(--s1); align-items: start; padding: var(--s5); background: color-mix(in srgb, var(--brand) 6%, var(--paper)); border: 1px solid var(--line); border-radius: var(--radius-lg); counter-increment: how; }
.how__steps li::before { content: counter(how); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--royal); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1; box-shadow: 0 0 0 3px var(--accent); margin: 3px; }
.how__steps h3 { align-self: center; min-height: 2.5rem; display: flex; align-items: center; margin: 0; font-size: var(--fs-1); font-weight: 700; line-height: 1.25; }
.how__steps p { margin: 0; font-size: 0.95rem; }

.story { padding-block: var(--s7) 0; }
.story__grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 56rem) { .story__grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s7); } }
.talk { display: grid; gap: var(--s3); justify-items: start; padding: var(--s5); border-radius: var(--radius-lg); background: var(--royal); color: #fff; border-top: 4px solid var(--accent); }
.talk h2 { font-size: var(--fs-2); color: #fff; }
.talk p { margin: 0; color: rgba(255, 255, 255, 0.88); }
.about { max-width: var(--measure); }

/* ---------------------------------------------------------------- find my booking */
.track-hero { background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--brand) 60%, #fff) 0%, var(--royal) 70%); color: #fff; border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.track-hero__in { display: grid; gap: var(--s3); justify-items: start; padding-block: var(--s7); }
.track-hero h1 { font-size: clamp(1.9rem, 6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.track-hero p { max-width: 46ch; margin: 0; font-size: var(--fs-1); color: rgba(255, 255, 255, 0.9); }
.track { display: grid; gap: var(--s5); max-width: 36rem; margin-inline: auto; margin-top: calc(-1 * var(--s6)); position: relative; z-index: 2; }
.track__form { display: grid; gap: var(--s4); padding: var(--s5); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -18px rgba(10, 14, 30, 0.35); }
.track__note { padding: var(--s4) var(--s5); border-left: 4px solid var(--accent); background: var(--wash); border-radius: 0 var(--radius) var(--radius) 0; }
.track__note h2 { font-size: var(--fs-2); margin-bottom: var(--s2); }
.track__note p { margin: 0; }
.track__card { display: grid; gap: var(--s4); padding: var(--s5); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 14px 30px -20px rgba(20, 24, 40, 0.4); }
.track__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px dashed var(--line-strong); }
.track__label { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.track__code { margin: 0; font-family: var(--font-code); font-size: var(--fs-3); font-weight: 700; letter-spacing: 0.04em; }
.track__next { margin: 0; }
.track__facts { display: grid; gap: var(--s3); margin: 0; }
.track__facts > div { display: flex; justify-content: space-between; gap: var(--s4); }
.track__facts dt { color: var(--ink-soft); }
.track__facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.track__help { margin: 0; font-size: 0.95rem; }

/* ---------------------------------------------------------------- trip detail */
.trip-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(26rem, 74vh, 40rem); background: var(--royal); color: #fff; overflow: hidden; }
.trip-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 10, 18, 0.78) 0%, rgba(8, 10, 18, 0.4) 48%, rgba(8, 10, 18, 0.05) 100%), linear-gradient(to top, rgba(8, 10, 18, 0.7) 0%, rgba(8, 10, 18, 0) 55%); }
@media (max-width: 47.99rem) { .trip-hero::before { background: linear-gradient(to top, rgba(8, 10, 18, 0.9) 0%, rgba(8, 10, 18, 0.55) 55%, rgba(8, 10, 18, 0.3) 100%); } }
.trip-hero::after { content: ""; position: absolute; inset: 0.5rem; z-index: 1; pointer-events: none; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
@media (min-width: 48rem) { .trip-hero::after { inset: 1rem; } }
.trip-hero__body { position: relative; z-index: 2; display: grid; gap: var(--s3); justify-items: start; padding: var(--s7) var(--s5) var(--s7); }
.trip-hero__back { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--s4); margin-bottom: var(--s4); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: rgba(8, 10, 18, 0.35); color: #fff; font-weight: 600; text-decoration: none; }
.trip-hero__back:hover { background: rgba(255, 255, 255, 0.2); }
.trip-hero__back:focus-visible, .buy a:focus-visible, .buy-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.trip-hero__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.tag { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.25rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.9rem; font-weight: 600; backdrop-filter: blur(4px); }
.tag .icon { width: 1rem; height: 1rem; flex: none; }
.tag--gold { border-color: var(--accent); background: rgba(8, 10, 18, 0.6); }
.trip-hero h1 { max-width: 22ch; font-size: clamp(2.1rem, 6.5vw, 3.7rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; color: #fff; text-wrap: balance; }
.trip-hero__lead { max-width: 52ch; margin: 0; font-size: 1.15rem; color: rgba(255, 255, 255, 0.92); }
.trip-hero__ctl { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s3); margin: 0 var(--s5) var(--s5); }
@media (min-width: 48rem) { .trip-hero__ctl { position: absolute; right: var(--s6); bottom: var(--s6); margin: 0; padding: var(--s1) var(--s2); border-radius: 999px; background: rgba(8, 10, 18, 0.45); backdrop-filter: blur(6px); } }
.trip-hero .hero__btn .icon { width: 1.2rem; height: 1.2rem; flex: none; }
.trip-hero__tags + h1 { margin-top: var(--s1); }
.trip-hero__body { padding-bottom: var(--s6); }
@media (min-width: 48rem) { .trip-hero__body { padding-bottom: var(--s7); } }
.trip-hero__dots { display: flex; align-items: center; gap: var(--s1); }
.trip-hero__dot { position: relative; width: var(--touch); height: var(--touch); padding: 0; border: 0; background: none; cursor: pointer; }
.trip-hero__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.7rem; height: 0.7rem; border: 2px solid #fff; border-radius: 999px; background: transparent; transform: translate(-50%, -50%); transition: width 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }
.trip-hero__dot[aria-current="true"]::before { width: 1.9rem; border-color: var(--accent); background: var(--accent); }
.trip-hero__arrow { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: rgba(8, 10, 18, 0.45); color: #fff; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.trip-hero__arrow:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; }
.trip-hero__arrow .icon { width: 1.3rem; height: 1.3rem; }
.trip-hero__arrow:focus-visible, .trip-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.glance { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; margin: calc(-1 * var(--s6)) 0 var(--s7); background: var(--line); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -18px rgba(10, 14, 30, 0.35); overflow: hidden; }
.glance__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--paper); }
.glance__item .icon { width: 1.6rem; height: 1.6rem; flex: none; color: var(--brand-strong); }
.glance dt { font-size: 0.8rem; color: var(--ink-soft); }
.glance dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.glance dd small { font-family: var(--font-text); font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }

.detail { display: grid; gap: var(--s7); }
@media (min-width: 64rem) { .detail { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; gap: var(--s7); } }
.trip-main { display: grid; gap: var(--s7); min-width: 0; }
.block { scroll-margin-top: calc(var(--bar-h, 4.2rem) + var(--sub-h, 3.6rem) + var(--s4)); }
.subnav { position: sticky; top: var(--bar-h, 4.2rem); z-index: 15; display: flex; gap: var(--s1); margin: 0 0 var(--s6); padding: 0.3rem; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 24px -16px rgba(10, 14, 30, 0.5); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 var(--s4); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
.subnav a:hover { background: var(--wash); }
.subnav a[aria-current="true"] { background: var(--royal); color: #fff; box-shadow: 0 0 0 2px var(--accent) inset; }
.subnav a:focus-visible { outline: var(--ring); outline-offset: 1px; }
.block .section-head { margin-bottom: var(--s5); }
.block h3 { font-size: var(--fs-1); }

.itin { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: day; display: grid; gap: var(--s6); }
.itin > li { position: relative; padding-left: 3.75rem; counter-increment: day; }
.itin > li::before { content: counter(day); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--royal); color: #fff; font-family: var(--font-display); font-weight: 800; box-shadow: 0 0 0 3px var(--accent); margin: 3px; }
.itin > li::after { content: ""; position: absolute; left: calc(1.25rem + 2px); top: 3.4rem; bottom: calc(-1 * var(--s6) + 0.4rem); width: 2px; background: linear-gradient(var(--accent), transparent); }
.itin > li:last-child::after { display: none; }
.itin h3 { font-size: var(--fs-2); line-height: 1.2; letter-spacing: -0.01em; }
.itin__day { display: inline-block; margin: 0 0 var(--s1); padding: 0.1rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, var(--paper)); font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.itin__text { margin: var(--s2) 0 0; }

.pair { display: grid; gap: var(--s5); }
@media (min-width: 40rem) { .pair { grid-template-columns: 1fr 1fr; } }
.incl { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.incl--check { background: color-mix(in srgb, var(--confirmed-bg) 50%, var(--paper)); border-top: 4px solid var(--confirmed); }
.incl--cross { background: color-mix(in srgb, var(--rejected-bg) 40%, var(--paper)); border-top: 4px solid var(--rejected); }
.incl h2 { margin-bottom: var(--s4); font-size: var(--fs-2); }
.incl ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.incl li { display: flex; align-items: flex-start; gap: var(--s3); }
.incl li .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.3rem; }
.incl--check li .icon { color: var(--confirmed); }
.incl--cross li .icon { color: var(--rejected); }

.pickup { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s3); margin: 0; }
.pickup__item { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); background: var(--wash); }
.pickup__item .icon { width: 1.4rem; height: 1.4rem; flex: none; margin-top: 0.15rem; color: var(--brand-strong); }
.pickup__map { margin-top: var(--s3); min-height: var(--touch); gap: var(--s2); font-weight: 600; text-decoration: none; }
.pickup__map .icon { width: 1.1rem; height: 1.1rem; margin: 0; color: currentColor; }
.pickup dt { font-size: 0.8rem; color: var(--ink-soft); }
.pickup dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--s3); padding: 0; margin: 0; list-style: none; }
.date { display: grid; justify-items: center; gap: 0.1rem; padding: var(--s3) var(--s2); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 8px 18px -14px rgba(20, 24, 40, 0.5); font-variant-numeric: tabular-nums; }
.date__wd { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.date__day { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-4); line-height: 1; }
.date__mo { font-size: 0.8rem; color: var(--ink-soft); }

.faq { max-width: var(--measure); margin-bottom: var(--s2); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--touch); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--accent-strong); }
.faq[open] summary::after { content: "\2212"; }
.faq[open] { border-color: var(--accent); }
.faq p { margin: 0 0 var(--s3); }

.buy { display: none; }
@media (min-width: 64rem) {
  .buy { display: grid; gap: var(--s4); position: sticky; top: calc(var(--bar-h, 4.2rem) + var(--sub-h, 3.6rem) + var(--s4)); padding: var(--s5) var(--s5) var(--s6); background: var(--royal); color: #fff; border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -24px rgba(10, 14, 30, 0.7); }
}
.buy__from { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.buy__amount { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-5); line-height: 1; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.buy__amount small { font-family: var(--font-text); font-weight: 400; font-size: 0.95rem; color: rgba(255, 255, 255, 0.78); }
.buy .btn--primary, .buy-bar .btn--primary { background: #fff; color: var(--ink); border-color: #fff; font-weight: 700; }
.buy .btn--primary:hover, .buy-bar .btn--primary:hover { background: var(--wash); border-color: var(--accent); }
.buy .btn--primary:disabled, .buy-bar .btn--primary:disabled { background: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); border-color: transparent; }
.buy__points { display: grid; gap: var(--s3); margin: var(--s2) 0 0; padding: var(--s4) 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.buy__points li { display: flex; align-items: flex-start; gap: var(--s3); font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); }
.buy__points .icon { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.2rem; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.buy__none { margin: 0; color: rgba(255, 255, 255, 0.85); }
.buy-bar { justify-content: space-between; background: var(--royal); color: #fff; border-top: 3px solid var(--accent); }
.buy-bar > .btn { flex: none; padding-inline: var(--s6); }
.buy-bar__price { margin: 0; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: var(--fs-2); line-height: 1.1; }
.buy-bar__sub { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }
@media (min-width: 64rem) { .buy-bar { display: none; } }

/* ---------------------------------------------------------------- booking steps */
.book-band { background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--brand) 60%, #fff) 0%, var(--royal) 70%); color: #fff; border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.book-band__in { display: grid; gap: var(--s3); justify-items: start; padding-block: var(--s6) calc(var(--s7) + var(--s4)); }
.book-band .trip-hero__back { margin-bottom: var(--s2); }
.book-band__trip { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 5.5vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.book-band__note { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, 0.9); }
.book { position: relative; z-index: 2; max-width: 42rem; margin: calc(-1 * var(--s7)) auto 0; display: grid; gap: var(--s5); padding: var(--s5); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -28px rgba(10, 14, 30, 0.45); }
@media (min-width: 40rem) { .book { padding: var(--s6); } }
.book h1 { font-size: var(--fs-4); letter-spacing: -0.01em; }
.book .stepper > li::before { border-color: var(--line-strong); }
.book .stepper > li.is-done::before, .slip-page .stepper > li.is-done::before { background: var(--royal); border-color: var(--accent); color: #fff; }
.book .stepper > li.is-done::after, .slip-page .stepper > li.is-done::after { background: var(--accent); }
.book .stepper > li[aria-current="step"]::before, .slip-page .stepper > li[aria-current="step"]::before { border-color: var(--accent); background: var(--royal); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, white); }
.qty { display: flex; align-items: stretch; width: max-content; max-width: 100%; }
.qty .btn { min-width: var(--touch); padding-inline: 0; font-size: var(--fs-2); }
.qty .input { -moz-appearance: textfield; appearance: textfield; width: 5rem; text-align: center; border-radius: 0; font-variant-numeric: tabular-nums; }
.qty .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.qty .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.quote { background: var(--wash); border-radius: var(--radius-lg); padding: var(--s4) var(--s5); display: grid; gap: var(--s2); min-height: 5rem; }
.quote__big { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3); color: var(--accent-strong); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.step-actions { margin-top: var(--s2); }
.review-list { display: grid; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
.notice { border-left: 4px solid var(--brand); background: var(--wash); padding: var(--s3) var(--s4); border-radius: 0 var(--radius) var(--radius) 0; max-width: var(--measure); }
.terms-box { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s4); }
.terms-box summary { cursor: pointer; font-weight: 600; min-height: var(--touch); display: flex; align-items: center; }
.terms-box .stack { padding-bottom: var(--s3); }

/* ---------------------------------------------------------------- payment slip and confirmation */
.slip-page { padding-block: var(--s4) var(--s6); }
.slip-page .stepper { max-width: 40rem; margin: 0 auto var(--s5); }
.slip__figure--pay { margin-block: var(--s2); }
.slip__trip { color: var(--ink-soft); font-size: 0.95rem; margin-top: var(--s3); }
.slip__notice { font-weight: 600; max-width: none; }
.shot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.shot__img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); flex: none; }
.slip__stub .btn--block { margin-top: var(--s4); }
.slip__stub .form-error { margin-top: var(--s4); }
.slip__help { margin-top: var(--s5); }
.slip-page .back-link { display: block; text-align: center; margin-top: var(--s4); }
.code-big { overflow-wrap: anywhere; }

/* Number inputs that have their own +/- buttons or no use for a stepper: no spinner arrows. */
.qty .input::-webkit-outer-spin-button, .qty .input::-webkit-inner-spin-button, input[inputmode="numeric"]::-webkit-outer-spin-button, input[inputmode="numeric"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }