/* Travo, public site.
   Warm, editorial, unhurried. The visual job is to look like a company that has been
   running tours for ten years, because that is the single hardest thing to convey
   to someone in Manchester who has never heard of us. */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* Travo International brand kit v1.1 (3 Oct 2026). Core hexes are the kit's; the rest are
   supporting UI tokens, each contrast-checked (research/brand-reskin-spec-2026-10-03.md).
   Rules that are easy to break: white text never on --brand, --sky or --coral; --brand and
   --sky are never small text; coral is a small accent, at most once per screen. */
:root {
  --brand:        #3C91DD;   /* Travo Blue: large areas, route line, focus ring */
  --action:       #274F9C;   /* Deep Blue: buttons, links. White on it 7.8:1 */
  --action-hover: #1F4183;
  --action-press: #18336A;
  --sky:          #63C7F2;   /* fills with navy text only */
  --coral:        #FF6B49;   /* small accents and fills with navy text only */
  --coral-tint:   #FFE9E3;
  --page:         #FAFBFD;
  --tint:         #E8F1FB;   /* light blue band */
  --ink:          #14263D;   /* Dark Navy: text, dark surfaces. 14.8:1 */
  --ink-muted:    #4A5B70;   /* 6.7:1 */
  --line:         #D9E1EA;   /* decorative borders only */
  --field:        #7B8A9D;   /* input borders, 3.4:1 */
  --ok:           #1E7B4F;
  --err:          #B42318;
  --eyebrow:      #BFE6FA;   /* the small caps line above a heading over a photograph */
  --shimmer:      #EDF2F8;   /* the moving highlight in a loading placeholder */
  --shadow:   0 1px 2px rgba(20,38,61,.06), 0 8px 24px rgba(20,38,61,.08);
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* The hidden attribute must win over any display rule (cards are display:flex), or a
   filtered-out card stays on screen. Was broken on every listing filter until 3 Oct. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-weight: 700; } h3 { font-weight: 600; }
h1, h2, h3 { font-family: var(--sans); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
/* Every link is Deep Blue and underlined unless a component says otherwise: the
   browser default blue (#0000EE) is not a brand colour. */
a { color: var(--action); text-underline-offset: 3px; text-decoration-thickness: 1px; }

.skip-link {
  position: fixed; left: 16px; top: 10px; z-index: 100;
  padding: 10px 14px; border-radius: 5px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
  transform: translateY(-150%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
#main-content:focus { outline: none; }
/* Kit focus ring: Travo Blue clears 3:1 against white for a non-text indicator. Element
   rules below may set their own; this is the floor for everything else. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Section-heading accent -- opt-in, not automatic: a short underline in the brand's
   coral accent under a heading that opens a section, borrowed from a more premium-reading
   pass on the layout. Doesn't apply inside cards or small contexts. */
.section-underline { position: relative; display: inline-block; padding-bottom: 14px; }
.section-underline::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px;
  background: var(--coral); border-radius: 2px;
}

/* ── nav ── */
.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  min-height: 74px; padding: 8px 32px; border-bottom: 1px solid var(--line);
  background: rgba(250,251,253,.96); backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 rgba(23,37,58,.025);
}
.brand { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 25px; }
.nav-links a {
  font-size: 14px; color: var(--ink-muted); text-decoration: none; font-weight: 600;
  border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: var(--action); border-color: var(--coral); }
.nav-destinations { position: relative; }
.nav-destinations summary {
  list-style: none; cursor: pointer; color: var(--ink-muted); font-size: 14px; font-weight: 600;
  padding: 13px 18px 13px 0;
}
.nav-destinations summary::-webkit-details-marker { display: none; }
.nav-destinations summary::after {
  content: ''; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .16s ease;
}
.nav-destinations[open] summary { color: var(--action); }
.nav-destinations[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.nav-destinations-menu {
  position: absolute; left: -18px; top: calc(100% + 9px); width: 340px;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; box-shadow: 0 18px 50px rgba(23,37,58,.16);
}
.nav-destinations-menu a { display: block; padding: 11px 12px; border: 0; border-radius: 7px; }
.nav-destinations-menu a:hover { background: var(--tint); border: 0; }
.nav-destinations-menu strong { display: block; color: var(--ink); font-size: 14px; }
.nav-destinations-menu span { display: block; margin-top: 1px; color: var(--ink-muted); font-size: 12px; font-weight: 400; }
.btn-nav-cta {
  font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var(--action);
  border: 0; border-radius: 12px; min-height: 44px; padding: 9px 18px; white-space: nowrap; cursor: pointer; transition: background .15s ease;
}
.btn-nav-cta:hover { background: var(--action-hover); }
.btn-nav-cta:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.btn-menu {
  display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line);
  border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.btn-menu span { display: block; width: 20px; height: 1.5px; margin: 4px 0; background: currentColor; }
.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto;
  background: var(--page); color: var(--ink); padding: 18px 22px 40px;
}
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mobile-menu-head span { font-family: var(--sans); font-size: 21px; font-weight: 600; color: var(--ink); }
.mobile-menu-head button {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 27px; line-height: 1; cursor: pointer;
}
.mobile-menu nav > a {
  display: block; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.mobile-menu nav > a strong { display: block; font-family: var(--sans); font-size: 21px; }
.mobile-menu nav > a span { display: block; margin-top: 2px; color: var(--ink-muted); font-size: 13px; }
.mobile-menu-label { margin: 28px 0 12px; color: var(--action-hover); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mobile-destinations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-destinations a {
  padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: var(--ink); font-weight: 650; text-decoration: none;
}
.mobile-menu-secondary { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 28px; }
.mobile-menu-secondary a { color: var(--action); font-size: 14px; font-weight: 650; }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-links, .btn-saved { display: none; }
  .btn-menu { display: block; flex: none; }
  .nav { gap: 12px; }
}

/* ── hero ── */
/* Full-bleed photograph with the offer over it. Competitors all lead with a large
   image because a travel page is judged in the first second, before any copy is
   read. The dark scrim is not decoration: it is what keeps white text legible over
   an arbitrary photo, so it must stay if the image is ever swapped. */
.hero-photo {
  position: relative; min-height: clamp(460px, 66vh, 660px);
  display: flex; align-items: flex-end;
  background: var(--action) center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,32,.42) 0%, rgba(20,26,32,.18) 38%, rgba(20,26,32,.80) 100%);
}
.hero-photo-inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto; width: 100%;
  padding: 48px 32px 52px; color: #fff;
}
.hero-photo .eyebrow { color: var(--eyebrow); }
.hero-photo h1 {
  color: #fff; font-size: clamp(34px, 5vw, 62px); max-width: 17ch;
  margin-bottom: .3em; text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero-photo .lede { color: rgba(255,255,255,.92); max-width: 54ch; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero-photo .cta-note { color: rgba(255,255,255,.82); }
/* Real, verifiable social proof in the hero -- the rating and count come from
   Travo's actual Google Business listing, not a badge invented for the layout. */
.hero-rating {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: 40px; padding: 7px 15px; backdrop-filter: blur(6px);
}
.hero-rating span.hero-rating-stars {
  /* Needs to outrank ".hero-rating span" below, which sets everything in the badge to
     white. The stars are a span too, so the plain class selector lost on specificity and
     the rating had been rendering white rather than in colour. */
  color: var(--coral); font-size: 13px; letter-spacing: 1.5px;
}
.hero-rating span { font-size: 13px; color: #fff; font-weight: 500; }
.hero-rating a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .hero-photo-inner { padding: 36px 22px 40px; } }

.hero { padding: 76px 32px 72px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid {
  max-width: 1100px; margin: 0 auto; display: grid; gap: 56px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
}
.eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--action); font-weight: 600; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(28px, 4.2vw, 46px); margin-bottom: .4em; }
.lede { font-size: clamp(17px, 1.7vw, 19px); color: var(--ink-muted); max-width: 56ch; }
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.cta-note { font-size: 14px; color: var(--ink-muted); }

/* Route diagram: the honest alternative to a stock hero photo. Every label is a real
   figure from the pricing engine's own train routes, not decoration. */
.hero-route { display: flex; justify-content: center; }
.route-svg { width: 100%; max-width: 300px; height: auto; }
.route-line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 6; }
.route-dot { fill: var(--page); stroke: var(--action); stroke-width: 3; }
.route-dot-start, .route-dot-end { fill: var(--coral); stroke: var(--coral); }
.route-city { font: 600 15px/1 var(--sans); fill: var(--ink); text-anchor: start; }
.route-sub { font: 12px/1 var(--sans); fill: var(--ink-muted); text-anchor: start; }
.route-train-body { fill: var(--action); }
.route-train-wheel { fill: var(--ink); }
.route-time { font: 600 11.5px/1 var(--sans); fill: var(--action-hover); text-anchor: start; }
.route-time-sub { font: 10.5px/1 var(--sans); fill: var(--ink-muted); text-anchor: start; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-route { order: -1; } .route-svg { max-width: 220px; } }

.btn-primary {
  font: inherit; font-weight: 600; font-size: 16px;
  background: var(--action); color: #fff; border: 0; border-radius: 12px;
  min-height: 48px; padding: 12px 24px; cursor: pointer; box-shadow: var(--shadow);
  transition: background .15s ease, transform .15s ease;
  text-decoration: none; display: inline-block;   /* also used on <a>: a button, not a link */
}
.btn-primary:hover { background: var(--action-hover); }
.btn-primary:active { background: var(--action-press); transform: translateY(1px); }
.btn-primary:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }

/* ── trust ── */
.trust { background: var(--tint); padding: 48px 32px; border-bottom: 1px solid var(--line); }
.trust-grid {
  max-width: 1040px; margin: 0 auto; display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.trust-item { display: flex; flex-direction: column; align-items: flex-start; }
.trust-icon { width: 34px; height: 34px; margin-bottom: 12px; }
.trust-icon .ti-ring { fill: none; stroke: var(--coral); stroke-width: 2; }
.trust-icon .ti-mark { fill: none; stroke: var(--action); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trust-icon .ti-line { fill: none; stroke: var(--coral); stroke-width: 1.4; opacity: .55; }
.trust-grid strong { display: block; font-family: var(--sans); font-size: 19px; margin-bottom: 3px; }
.trust-grid span { font-size: 14px; color: var(--ink-muted); }

/* ── cities ── */
.cities { max-width: 1040px; margin: 0 auto; padding: 72px 32px 48px; }
.cities h2 { font-size: clamp(26px, 3.6vw, 38px); max-width: 20ch; margin-bottom: .3em; }
.cities-sub { color: var(--ink-muted); font-size: 14px; max-width: 56ch; margin-bottom: 36px; }
.city-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.city h3 { font-size: 21px; margin-bottom: .3em; }
.city p { font-size: 15px; color: var(--ink-muted); margin: 0; }
/* Honest line-art, not a photo standing in for one. Presented at icon scale on a
   textured panel so it reads as considered illustration, never as a stock substitute
   for the real photography still to come. */
.city-icon {
  aspect-ratio: 16 / 10; border-radius: 12px; margin-bottom: 16px; border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(31,78,107,.04) 22px 23px),
    linear-gradient(150deg, var(--tint), #ece2d1);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.city-icon svg { width: 62%; height: 62%; }
.ci-arch, .ci-base-line { fill: none; stroke: var(--action); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ci-base { fill: var(--coral); opacity: .7; }
/* Real photographs where we have them, in the same slot the line-art used. */
.city-photo {
  aspect-ratio: 16 / 10; border-radius: 12px; margin-bottom: 16px; border: 1px solid var(--line);
  overflow: hidden;
}
.city-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── testimonials ── */
.reviews { max-width: 1040px; margin: 0 auto; padding: 48px 32px 72px; }
.reviews h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: .2em; }
.reviews-sub { color: var(--ink-muted); font-size: 14px; margin-bottom: 32px; }
.reviews-sub a { color: var(--action); }
.review-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.review-card {
  background: var(--tint); border: 1px solid var(--line); border-radius: 6px; padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.review-stars { color: var(--coral); font-size: 14px; letter-spacing: 1px; }
.review-card p { font-size: 15px; line-height: 1.5; margin: 0; }
.review-who { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-muted); margin-top: auto; }
.review-who strong { color: var(--ink); font-weight: 600; }

/* ── close ── */
.close {
  max-width: 640px; margin: 0 auto; padding: 8px 32px 88px; text-align: center;
}
.close h2 { font-size: clamp(26px, 3.6vw, 38px); }
.close p { color: var(--ink-muted); margin-bottom: 28px; }

/* ── footer ── */
.foot { border-top: 1px solid var(--line); background: var(--tint); }
.foot-grid {
  max-width: 1040px; margin: 0 auto; padding: 48px 32px 32px;
  display: grid; gap: 36px; grid-template-columns: 1.6fr 1fr 1fr;
}
.foot-brand { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: .1em; display: block; margin-bottom: 10px; }
.foot-col p { font-size: 14px; color: var(--ink-muted); max-width: 42ch; }
.foot-col h2 { font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin: 0 0 12px; }
.foot-col a, .foot-link-btn {
  display: block; font: inherit; font-size: 14px; color: var(--ink-muted); text-decoration: none;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; margin-bottom: 8px;
}
.foot-col a:hover, .foot-link-btn:hover { color: var(--action); }
.foot-legal {
  max-width: 1040px; margin: 0 auto; padding: 20px 32px 32px; border-top: 1px solid var(--line);
  color: var(--ink-muted); font-size: 13px;
}
.foot-legal p { margin: 0 0 6px; }
.foot-small { font-size: 12px; max-width: 62ch; opacity: .85; }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; } }

/* ── scroll reveal ── */
.reveal-pending { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal-pending.reveal-in { opacity: 1; transform: translateY(0); }

/* ── chat ── */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 15px; font-weight: 600;
  background: var(--action); color: #fff; border: 0; border-radius: 40px;
  padding: 13px 22px; cursor: pointer; box-shadow: var(--shadow);
}
.chat-fab:hover { filter: brightness(1.08); }
.chat-fab:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.fab-dot { width: 8px; height: 8px; border-radius: 50%; background: #7ee0a5; box-shadow: 0 0 0 3px rgba(126,224,165,.25); }

/* WhatsApp -- a second, more familiar channel next to the AI consultant. Left side
   so it never collides with the chat button/panel on the right. Desktop only: on
   mobile this collapses into the bottom bar instead (thumb reach, not a corner tap). */
.whatsapp-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 40;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease;
}
.whatsapp-fab svg { width: 26px; height: 26px; fill: #fff; }
.whatsapp-fab:hover { filter: brightness(1.06); transform: scale(1.05); }
.whatsapp-fab:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }

.mobile-bar { display: none; }

@media (max-width: 640px) {
  .whatsapp-fab { display: none; }
  .chat-fab { display: none; }
  .mobile-bar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(20,38,61,.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bar-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px 8px; font: inherit; font-size: 11px; font-weight: 600;
    color: var(--action); background: none; border: 0; border-right: 1px solid var(--line);
    text-decoration: none; cursor: pointer;
  }
  .mobile-bar-btn:last-child { border-right: 0; }
  .mobile-bar-btn svg { width: 20px; height: 20px; fill: currentColor; }
  .mobile-bar-whatsapp { color: var(--ok); }
  .mobile-bar-chat { color: var(--action-hover); }
  /* Chat panel already goes full-screen under this breakpoint; leave room so the
     bottom bar doesn't sit under it while closed, and the open panel covers it. */
  body { padding-bottom: 58px; }
}

.chat-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: min(410px, calc(100vw - 32px)); height: min(620px, calc(100vh - 44px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(20,38,61,.22); overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--action); color: #fff;
}
.chat-head strong { display: block; font-family: var(--sans); font-size: 17px; }
.chat-head span { font-size: 12px; opacity: .85; }
.chat-close { background: 0; border: 0; color: #fff; font-size: 27px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-close:focus-visible { outline: 2px solid #fff; }

.chat-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 12px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.msg-bot { background: var(--tint); border-bottom-left-radius: 3px; align-self: flex-start; }
.msg-me { background: var(--action); color: #fff; border-bottom-right-radius: 3px; align-self: flex-end; }
.msg-err { background: #FDECEA; color: var(--err); align-self: flex-start; font-size: 14px; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 13px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9ada0; animation: bob 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes bob { 0%,60%,100% { opacity:.35; transform: translateY(0); } 30% { opacity:1; transform: translateY(-3px); } }

.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1; font: inherit; font-size: 15px; padding: 11px 13px;
  border: 1px solid var(--field); border-radius: 10px; background: var(--page);
}
.chat-form input:focus { outline: 2px solid var(--action); outline-offset: -1px; }
.chat-form button {
  font: inherit; font-weight: 600; background: var(--action); color: #fff;
  border: 0; border-radius: 12px; padding: 0 18px; cursor: pointer;
}
.chat-form button:disabled { opacity: .5; cursor: default; }
.chat-legal { margin: 0; padding: 0 14px 12px; font-size: 11px; color: var(--ink-muted); text-align: center; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 640px) {
  .hero { padding: 56px 22px 48px; }
  .cities { padding: 52px 22px; }
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100vh; border-radius: 0; border: 0; }
}

/* ── packages ── */
.packages { max-width: 1040px; margin: 0 auto; padding: 64px 32px 8px; }
.packages-head { max-width: 60ch; margin-bottom: 36px; }
.packages-head h2 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: .3em; }
.packages-head p { color: var(--ink-muted); font-size: 15px; margin: 0; }

.pkg-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* Photo-led, the way every competitor's tour card works: image first, then the
   facts. A text-only card reads as an unfinished page no matter how good the copy
   is -- that was the single biggest gap against Intrepid/Viator/Advantour. */
.pkg-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pkg-card:hover { transform: translateY(-3px); box-shadow: 0 6px 28px rgba(20,38,61,.14); }
.pkg-card-popular { border: 2px solid var(--coral); }
.pkg-photo { position: relative; aspect-ratio: 3 / 2; background: var(--tint); }
.pkg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Duration sits on the image, as it does on every competitor card -- it is the
   first thing someone filters on and it costs no vertical space here. */
.pkg-duration {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(20,38,61,.82); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 4px; backdrop-filter: blur(4px);
}
.pkg-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.pkg-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--coral); color: var(--ink); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
}
.pkg-card h3 { font-size: 19px; margin: 0; }
.pkg-tagline { color: var(--ink-muted); font-size: 14px; margin: 0; }
.pkg-meta { font-size: 13px; color: var(--action); font-weight: 600; margin: 0 0 6px; }

.pkg-price { min-height: 40px; display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.pkg-price-from { font-size: 13px; color: var(--ink-muted); }
.pkg-price-amount { font-family: var(--sans); font-size: 30px; font-weight: 600; color: var(--ink); }
.pkg-price-unit { font-size: 13px; color: var(--ink-muted); }
.pkg-price-cta { font-size: 15px; color: var(--action); font-weight: 600; }
.pkg-skeleton {
  display: inline-block; width: 140px; height: 28px; border-radius: 4px;
  background: linear-gradient(90deg, var(--tint) 25%, var(--shimmer) 37%, var(--tint) 63%);
  background-size: 400% 100%; animation: pkg-shimmer 1.4s ease infinite;
}
@keyframes pkg-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.pkg-includes { list-style: none; margin: 4px 0 14px; padding: 0; font-size: 13px; color: var(--ink-muted); }
.pkg-includes li { padding: 3px 0 3px 20px; position: relative; }
.pkg-includes li::before { content: '✓'; position: absolute; left: 0; color: var(--action); font-weight: 700; }

.pkg-cta { width: 100%; padding: 12px 18px; font-size: 15px; }

@media (max-width: 640px) { .packages { padding: 44px 22px 8px; } }

/* ── package hotel line + itinerary accordion ── */
.pkg-hotels { font-size: 13px; color: var(--ink-muted); margin: 0 0 10px; line-height: 1.5; }
.pkg-hotels strong { color: var(--ink); }

.pkg-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: var(--tint); border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 9px 12px; margin-top: 2px; cursor: pointer; text-align: left;
}
.pkg-toggle:hover { background: var(--shimmer); }
.pkg-toggle-arrow { transition: transform .15s ease; font-size: 11px; }
.pkg-toggle-open .pkg-toggle-arrow { transform: rotate(180deg); }

.pkg-itinerary {
  list-style: none; margin: 0; padding: 0 0 2px; font-size: 13px;
  color: var(--ink-muted); line-height: 1.6;
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
}
.pkg-itinerary-open { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 12px; }
.pkg-itinerary li { padding: 6px 0; }
.pkg-itinerary li:not(:last-child) { border-bottom: 1px solid var(--tint); }

/* ── prose pages (about, legal, 404) ──────────────────────────────────────── */
.prose h2[id] { scroll-margin-top: 110px; }   /* anchor links land below the sticky header */
.prose { max-width: 720px; margin: 0 auto; padding: 64px 32px 80px; }
.prose h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: .35em; }
.prose h2 {
  font-size: 21px; margin: 2em 0 .5em; padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; }
.prose p, .prose li { color: var(--ink-muted); }
.prose .lede { color: var(--ink); }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose-meta { font-size: 13px; color: var(--ink-muted); opacity: .8; margin-bottom: 2.5em; }
.prose-center { text-align: center; }
.prose-center .lede { margin-left: auto; margin-right: auto; }
.nf-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 28px 0 32px; }
.nf-links a { color: var(--action); font-weight: 600; }
.foot-legal a { color: var(--ink-muted); text-decoration: underline; }
.foot-legal a:hover { color: var(--ink); }
@media (max-width: 640px) { .prose { padding: 44px 22px 64px; } }

/* ── brand mark ───────────────────────────────────────────────────────────── */
/* The real Travo wordmark is one shared asset, cached across every page. */
.brand { display: inline-flex; align-items: center; margin-right: auto; color: var(--action); }
.brand picture { display: block; }
/* Kit p8: the full lockup is never narrower than 160px, or INTERNATIONAL stops being
   readable. 70px tall = 161px wide. Phones get the wordmark alone (no descriptor) so the
   sticky header does not eat a ninth of the screen. */
.brand img { height: 70px; width: auto; display: block; }
.foot-brand img { height: 70px; width: auto; display: block; margin-bottom: 14px; }
@media (max-width: 640px) { .brand img { height: 30px; } }

/* ── in-chat quote card ───────────────────────────────────────────────────── */
/* A price is a decision, not a sentence. It gets its own card with the number
   leading, the way a fare quote does, the agent no longer recites the breakdown. */
.quote-card {
  align-self: stretch; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--coral); border-radius: 8px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.qc-head { display: flex; align-items: baseline; gap: 7px; }
.qc-per { font-family: var(--sans); font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink); }
.qc-unit { font-size: 13px; color: var(--ink-muted); }
.qc-total { font-size: 13px; color: var(--ink-muted); margin-top: 5px; }
.qc-block { margin-top: 13px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.qc-block h4 {
  font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--action); font-weight: 700; margin: 0 0 4px;
}
.qc-dim { color: var(--ink-muted); font-size: 12px; }
.qc-inc { margin: 0; padding-left: 16px; columns: 2; column-gap: 18px; }
.qc-inc li { margin-bottom: 2px; break-inside: avoid; }
.qc-cta {
  width: 100%; margin-top: 15px; font: inherit; font-weight: 600; font-size: 14px;
  background: var(--action); color: #fff; border: 0; border-radius: 12px;
  padding: 11px 16px; cursor: pointer; transition: background .15s ease;
}
.qc-cta:hover { background: var(--action-hover); }
.qc-cta:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.qc-note { margin: 9px 0 0; font-size: 11px; color: var(--ink-muted); text-align: center; }
@media (max-width: 420px) { .qc-inc { columns: 1; } }

/* ══ TOUR PAGES ═══════════════════════════════════════════════════════════════ */
.crumbs { max-width: 1140px; margin: 0 auto; padding: 16px 32px 0; font-size: 13px; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--action); text-decoration: underline; }
.crumbs span { margin: 0 6px; opacity: .5; }
.crumbs [aria-current] { color: var(--ink); margin: 0; }

.tour-hero {
  position: relative; margin: 18px auto 0; max-width: 1140px;
  min-height: clamp(300px, 42vh, 440px); display: flex; align-items: flex-end;
  background: var(--action) center/cover no-repeat; border-radius: 10px; overflow: hidden;
}
.tour-hero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,32,.30) 0%, rgba(20,26,32,.12) 42%, rgba(20,26,32,.82) 100%); }
.tour-hero-in { position: relative; z-index: 1; padding: 34px 36px 30px; color: #fff; }
.tour-hero .eyebrow { color: var(--eyebrow); margin-bottom: 12px; }
.tour-hero h1 { color: #fff; font-size: clamp(28px, 4.2vw, 46px); max-width: 20ch; margin-bottom: .25em; text-shadow: 0 2px 22px rgba(0,0,0,.4); }
.tour-hero .lede { color: rgba(255,255,255,.93); text-shadow: 0 1px 12px rgba(0,0,0,.4); }

/* Facts bar: the five things a buyer checks before reading a word of copy. */
.tour-facts {
  max-width: 1140px; margin: 0 auto; padding: 0 32px;
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--line); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 10px 10px; overflow: hidden;
}
.tour-facts > div { background: var(--page); padding: 15px 18px; }
.tour-facts span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--action); font-weight: 700; margin-bottom: 4px; }
.tour-facts strong { font-size: 14px; font-weight: 600; line-height: 1.35; }

.tour-grid {
  max-width: 1140px; margin: 0 auto; padding: 40px 32px 72px;
  display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start;
}
.tour-sec { margin-bottom: 46px; }
.tour-sec h2 { font-size: clamp(22px, 2.6vw, 29px); }
.sec-sub { color: var(--ink-muted); font-size: 15px; max-width: 62ch; }
.pace-note { font-size: 15px; color: var(--ink-muted); border-left: 3px solid var(--coral); padding-left: 14px; }

/* Day-by-day */
.days { list-style: none; margin: 0; padding: 0; }
.day { display: grid; grid-template-columns: 62px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.day:last-child { border-bottom: 0; }
.day-n { text-align: center; }
.day-n span { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.day-n strong { font-family: var(--sans); font-size: 30px; line-height: 1; color: var(--action); }
.day-body p { margin: 0 0 6px; }
.day-hl { margin: 4px 0 8px; font-size: 15px; color: var(--ink-muted); }
.day-title { font-weight: 600; color: var(--ink); }
.day-story { margin: 4px 0 10px; font-size: 15.5px; line-height: 1.7; color: var(--ink-muted); max-width: 62ch; }
.day-stay { font-size: 12px; color: var(--ink-muted); background: var(--tint); border-radius: 20px; padding: 3px 11px; display: inline-block; }
.day-stay-end { background: transparent; padding-left: 0; }
.day-stay a { color: var(--ink); text-underline-offset: 2px; }

.hotel-list { list-style: none; margin: 14px 0 0; padding: 0; }
.hotel-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hotel-list li:last-child { border-bottom: 0; }
.hotel-list a { color: var(--ink); text-underline-offset: 2px; }
.hotel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }

/* Included / not included, the exclusions are the trust-builder, so they sit level
   with the inclusions rather than hidden in small print. */
.inc-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 16px; }
.inc-grid h3 { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.inc-yes { color: var(--ok); }
.inc-no { color: var(--ink-muted); }
.inc-list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.inc-list li { position: relative; padding: 5px 0 5px 24px; color: var(--ink); }
.inc-list li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.inc-list-no li::before { content: '×'; color: var(--ink-muted); font-size: 17px; line-height: 1.2; }
.inc-loading { color: var(--ink-muted); font-size: 14px; font-style: italic; }

/* Group-size tiers */
.tiers { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.tiers th { text-align: left; font-family: var(--sans); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--action); padding: 0 0 9px; border-bottom: 1px solid var(--line); }
.tiers td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.tiers td:not(:first-child) { text-align: right; }
.tier-best td { background: rgba(39,79,156,.05); }
.tier-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--action); font-weight: 700; }
.tier-note { font-size: 13px; color: var(--ink-muted); margin-top: 12px; }

.facts-dl { margin: 14px 0 0; }
.facts-dl dt { font-weight: 700; font-size: 14px; margin-top: 16px; }
.facts-dl dd { margin: 4px 0 0; color: var(--ink-muted); font-size: 15px; }

.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--action); font-size: 21px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 10px 0 0; color: var(--ink-muted); font-size: 15px; }

/* Enquiry form */
.enq { margin-top: 18px; }
.enq-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.enq label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.enq label span { color: var(--action); margin-left: 2px; }
.enq input, .enq textarea, .enq select {
  width: 100%; font: inherit; font-size: 15px; font-weight: 400; margin-top: 5px;
  padding: 11px 13px; border: 1px solid var(--field); border-radius: 10px; background: #fff; color: var(--ink);
}
.enq input:focus, .enq textarea:focus, .enq select:focus { outline: 2px solid var(--action); outline-offset: -1px; border-color: var(--action); }
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-btns { display: grid; gap: 10px; margin-top: 4px; }
.enq-btns button { width: 100%; }
.enq-btns [hidden] { display: none; }
.btn-quiet { font: inherit; font-size: 15px; font-weight: 600; background: transparent; color: var(--action); border: 1.5px solid var(--action); border-radius: 12px; min-height: 48px; padding: 11px 20px; cursor: pointer; } .btn-quiet:hover { background: var(--tint); }
.btn-quiet:hover { border-color: var(--action); }
.btn-quiet:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
/* Request to book: the exact price for the chosen date and group */
.bk-terms { background: var(--tint); border: 1px solid var(--line); border-left: 3px solid var(--coral); border-radius: 8px; padding: 16px 18px; margin: 0 0 14px; font-size: 15px; }
.bk-terms[hidden] { display: none; }
.bk-terms p { margin: 0 0 .45em; color: var(--ink-muted); }
.bk-terms p:last-child { margin-bottom: 0; }
.bk-terms .bk-total { font-family: var(--sans); font-size: 22px; color: var(--ink); }
.bk-terms b { color: var(--ink); }
.enq-done .bk-ref { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.enq button[disabled] { opacity: .55; cursor: default; }
.enq-note { font-size: 12px; color: var(--ink-muted); margin-top: 12px; }
.enq-status { font-size: 14px; margin-top: 10px; min-height: 1em; }
.enq-bad { color: var(--err); font-weight: 600; }
.enq-done { background: var(--tint); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 8px; padding: 24px; }
.enq-done h3 { font-size: 21px; margin-bottom: .4em; }
.enq-done p { color: var(--ink-muted); font-size: 15px; margin: 0 0 .6em; }
.enq-done-alt a { color: var(--action); }
@media (max-width: 560px) { .enq-row { grid-template-columns: 1fr; } }

/* Related */
.rel-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 16px; }
.rel-card { display: block; text-decoration: none; color: var(--ink); }
.rel-card img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 7px; display: block; }
.rel-days { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--action); font-weight: 700; margin: 9px 0 3px; }
.rel-card strong { display: block; font-family: var(--sans); font-size: 17px; line-height: 1.25; }
.rel-cities { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.rel-card:hover strong { color: var(--action); }

/* Booking card, glass over nothing here, it sits on paper, so it stays solid. */
.tour-aside { position: sticky; top: 92px; }
.book-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--coral); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); }
.book-price { min-height: 62px; }
.bp-from { font-size: 12px; color: var(--ink-muted); display: block; }
.bp-amount { font-family: var(--sans); font-size: 38px; font-weight: 700; line-height: 1; }
.bp-unit { font-size: 13px; color: var(--ink-muted); margin-left: 6px; }
.bp-total { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 5px; }
.price-ask { font-family: var(--sans); font-size: 19px; color: var(--action); }
.book-meta { font-size: 13px; color: var(--ink-muted); margin: 10px 0 14px; }
.book-cur { display: flex; gap: 6px; margin-bottom: 15px; }
.book-cur button {
  flex: 1; font: inherit; font-size: 12px; font-weight: 600; padding: 7px 0; cursor: pointer;
  background: var(--page); color: var(--ink-muted); border: 1px solid var(--line); border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.book-cur button:not(.cur-on):hover { color: var(--ink); }
.book-cur .cur-on { background: var(--action); border-color: var(--action); color: #fff; }
.book-cta { display: block; text-align: center; text-decoration: none; }
.book-wa { display: block; text-align: center; margin-top: 9px; font-size: 14px; font-weight: 600; color: #128c46; text-decoration: none; padding: 9px; border: 1px solid #cfe8d8; border-radius: 4px; }
.book-wa:hover { background: #f2fbf5; }
.book-assure { list-style: none; margin: 16px 0 0; padding: 0; font-size: 13px; color: var(--ink-muted); }
.book-assure li { position: relative; padding: 4px 0 4px 20px; }
.book-assure li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.book-rating { font-size: 12px; color: var(--ink-muted); margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
.book-rating span { color: var(--coral); letter-spacing: 1px; }
.book-terms { font-size: 12px; margin: 10px 0 0; }
.book-terms a { color: var(--ink-muted); text-decoration: underline; }
.book-rating a { color: var(--action); }

/* Sticky mobile booking bar, the single highest-impact conversion element on a
   long page, because the price scrolls out of view before the decision is made. */
.sticky-book {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid var(--line); padding: 11px 18px; box-shadow: 0 -3px 16px rgba(20,38,61,.10);
}
.sticky-book.sticky-on { display: flex; }
.sticky-book .bp-from, .sticky-book .bp-total { display: none; }
.sticky-book .bp-amount { font-size: 24px; }
.sticky-book .btn-primary { padding: 11px 22px; font-size: 15px; }
.sticky-book .sb-price { margin-right: auto; }
.sb-wa {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ok); background: #fff;
}
.sb-wa svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 940px) {
  .tour-grid { grid-template-columns: 1fr; gap: 30px; }
  .tour-aside { position: static; order: -1; }
}
@media (max-width: 640px) {
  .tour-hero, .tour-facts { border-radius: 0; margin-top: 0; }
  /* Five full-width rows read as filler before the content; two columns keep the
     facts scannable in one screen. The last fact spans both when the count is odd. */
  .tour-facts { grid-template-columns: 1fr 1fr; padding: 0; border-left: 0; border-right: 0; }
  .tour-facts > div { padding: 12px 14px; }
  .tour-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tour-hero-in { padding: 26px 22px 24px; }
  .tour-grid { padding: 30px 22px 90px; }
  .crumbs { padding: 12px 22px 0; }
  /* One bottom bar, not two: once the price bar appears it carries Enquire and
     WhatsApp, so the Call/Chat/WhatsApp bar steps aside (they stacked to about a
     quarter of the screen). */
  body:has(.sticky-book.sticky-on) .mobile-bar { display: none; }
  .sticky-book.sticky-on { padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }
}

/* ══ TOURS INDEX ══════════════════════════════════════════════════════════════ */
.tours-head { max-width: 1140px; margin: 0 auto; padding: 30px 32px 8px; }
.tours-head h1 { font-size: clamp(28px, 4vw, 44px); }
.tour-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.tour-filters button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 9px 17px; cursor: pointer;
  background: var(--page); color: var(--ink-muted); border: 1px solid var(--line); border-radius: 30px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tour-filters button:hover { color: var(--ink); border-color: var(--coral); }
.tour-filters .tf-on { background: var(--action); border-color: var(--action); color: #fff; }
.tours-grid {
  max-width: 1140px; margin: 0 auto; padding: 28px 32px 72px;
  display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.tour-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease; }
.tour-card:hover { box-shadow: 0 10px 32px rgba(20,38,61,.13); transform: translateY(-2px); }
.tour-card-img { position: relative; display: block; }
.tour-card-img img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.tc-days { position: absolute; left: 12px; bottom: 12px; background: rgba(20,26,32,.78); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 20px; backdrop-filter: blur(4px); }
.tour-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.tour-card h3 { font-size: 19px; margin-bottom: .3em; }
.tour-card h3 a { color: var(--ink); text-decoration: none; }
.tour-card h3 a:hover { color: var(--action); }
.tc-cities { font-size: 13px; color: var(--action); font-weight: 600; margin: 0 0 8px; }
.tc-tag { font-size: 14px; color: var(--ink-muted); margin: 0 0 16px; }
.tc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.tc-from { font-size: 12px; color: var(--ink-muted); }
.tc-price strong { font-family: var(--sans); font-size: 21px; }
.tc-pp { font-size: 12px; color: var(--ink-muted); }
.tc-ask, .tc-link { font-size: 13px; font-weight: 600; color: var(--action); text-decoration: none; }
.tc-link:hover { text-decoration: underline; }
.tours-empty { max-width: 1140px; margin: 0 auto 60px; padding: 0 32px; color: var(--ink-muted); }
@media (max-width: 640px) { .tours-head, .tours-grid, .tours-empty { padding-left: 22px; padding-right: 22px; } }
.see-all-tours { max-width: 1040px; margin: 26px auto 0; padding: 0 32px; text-align: center; }
.see-all-tours a { color: var(--action); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 2px solid var(--coral); padding-bottom: 3px; }
.see-all-tours a:hover { color: var(--action-hover); }

/* ══ TRIP FINDER ══════════════════════════════════════════════════════════════ */
.find-intro { max-width: 760px; margin: 0 auto; padding: 52px 32px 0; text-align: center; }
.find-intro h1 { font-size: clamp(28px, 4vw, 44px); }
.find-intro .lede { margin: 0 auto; }
.finder { max-width: 760px; margin: 0 auto; padding: 34px 32px 80px; }
/* The trip planner and finder are drawn by script into an empty section. Reserve
   roughly the first step's height until then, or the footer renders mid-screen and is
   shoved down when the planner appears (a 0.28 layout shift on a slow phone). Only
   while empty: once drawn, the content sets the height. */
.finder:empty { min-height: 500px; }
@media (max-width: 700px) { .finder:empty { min-height: 740px; } }
.fq-head { text-align: center; margin-bottom: 26px; }
.fq-count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--action); font-weight: 700; margin-bottom: 12px; }
.fq-bar { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; max-width: 260px; margin: 0 auto 22px; }
.fq-bar i { display: block; height: 100%; background: var(--action); transition: width .3s ease; }
.fq-head h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: .3em; }
.fq-hint { color: var(--ink-muted); font-size: 15px; margin: 0; }
.fq-opts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fq-opt {
  text-align: left; font: inherit; cursor: pointer; padding: 17px 19px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fq-opt:hover { border-color: var(--coral); box-shadow: 0 6px 20px rgba(20,38,61,.09); transform: translateY(-1px); }
.fq-opt:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.fq-opt strong { display: block; font-family: var(--sans); font-size: 17px; margin-bottom: 3px; }
.fq-opt span { display: block; font-size: 13px; color: var(--ink-muted); }
.fq-back { display: block; margin: 22px auto 0; font: inherit; font-size: 14px; color: var(--ink-muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.fq-back:hover { color: var(--ink); }
.fq-results-head { text-align: center; margin-bottom: 28px; }
.fq-results-head h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: .3em; }
.fq-restart { margin-top: 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--action); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.fq-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.fq-more { text-align: center; margin-top: 28px; font-size: 15px; color: var(--ink-muted); }
.fq-more a { color: var(--action); font-weight: 600; }
@media (max-width: 640px) { .find-intro.finder { padding-left: 22px; padding-right: 22px; } }

/* ── icons ────────────────────────────────────────────────────────────────── */
.ico { width: 20px; height: 20px; flex: none; }

/* ── climate strip ────────────────────────────────────────────────────────── */
/* Bars scale across each trip's own range, so a mountain trip and a desert trip both
   read clearly instead of one flattening the other. */
.climate { margin-top: 18px; }
.cl-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  background: var(--tint); border: 1px solid var(--line); border-radius: 9px; padding: 14px 10px;
}
.cl-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cl-hi, .cl-lo { font-size: 11px; font-weight: 700; line-height: 1; }
.cl-hi { color: var(--ink); }
.cl-lo { color: var(--ink-muted); font-weight: 500; }
.cl-bar { position: relative; width: 100%; max-width: 22px; height: 88px; background: rgba(20,38,61,.06); border-radius: 4px; }
.cl-bar i { position: absolute; left: 0; right: 0; border-radius: 4px; display: block; }
/* Solid fills, the same three colours as the legend, so bar and key match exactly. */
.cl-good .cl-bar i { background: var(--ok); }
.cl-ok   .cl-bar i { background: var(--coral); }
.cl-poor .cl-bar i { background: #8394a3; }
.cl-wet { font-size: 10px; color: var(--action); font-weight: 600; }
.cl-m { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.cl-good .cl-m { color: var(--action); }
.cl-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--ink-muted); align-items: center; }
.cl-key span { display: inline-flex; align-items: center; gap: 6px; }
.cl-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cl-sw.cl-good { background: var(--ok); }
.cl-sw.cl-ok { background: var(--coral); }
.cl-sw.cl-poor { background: #8394a3; }
.cl-key-wet { margin-left: auto; }
.cl-verdict { margin-top: 13px; font-size: 15px; color: var(--ink); }
.cl-verdict strong { color: var(--action); }
@media (max-width: 700px) {
  .cl-grid { grid-template-columns: repeat(6, 1fr); gap: 8px 4px; }
  .cl-key-wet { margin-left: 0; }
}

/* facts bar now carries icons */
.tour-facts > div { display: flex; align-items: flex-start; gap: 11px; }
.tour-facts .ico { color: var(--action); margin-top: 2px; }

/* ══ HOMEPAGE ═════════════════════════════════════════════════════════════════ */
.home-hero {
  position: relative; min-height: clamp(520px, 76vh, 760px);
  display: flex; align-items: center;
  background: #101a24; border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* The hero photograph is a real <picture> rather than a CSS background so it can carry
   fetchpriority and responsive sources: it is the largest-contentful paint on the page.
   That means it needs taking out of flow by hand, otherwise it lays out as an ordinary
   inline image and shoulders the headline sideways. */
.home-hero-media {
  position: absolute; inset: 0; z-index: 0;
  display: block; pointer-events: none;
}
.home-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(20,38,61,.88) 0%, rgba(20,38,61,.64) 46%, rgba(20,38,61,.22) 100%);
}
.home-hero-in {
  position: relative; z-index: 1; max-width: 1140px; width: 100%;
  margin: 0 auto; padding: 60px 32px; color: #fff;
}
.home-hero .eyebrow { color: var(--eyebrow); }
.home-hero h1 {
  color: #fff; font-size: clamp(34px, 5vw, 62px); max-width: 17ch;
  margin-bottom: .35em; text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.home-hero h1 .h1-sub { display: block; margin-top: .3em; font-size: .52em; font-weight: 600; letter-spacing: -.01em; color: var(--eyebrow); }
.home-hero .lede { color: rgba(255,255,255,.92); max-width: 54ch; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.home-hero .hero-rating { margin: 26px 0 0; }
.btn-ghost {
  display: inline-block; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
  color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.42);
  border-radius: 12px; padding: 14px 26px; backdrop-filter: blur(6px);
  transition: background .16s ease, border-color .16s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.home-hero .btn-primary { text-decoration: none; display: inline-block; }

/* Numbers strip: every figure here is derived from the catalogue, never typed. */
.home-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  max-width: 1140px; margin: 0 auto; padding: 30px 32px;
  border-bottom: 1px solid var(--line); text-align: center; gap: 20px;
}
.home-strip strong { display: block; font-family: var(--sans); font-size: 34px; line-height: 1; color: var(--action); }
.home-strip span { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 6px; }

.home-sec { max-width: 1140px; margin: 0 auto; padding: 64px 32px; }
.home-sec-alt { max-width: none; background: var(--tint); border-block: 1px solid var(--line); }
.home-sec-alt > * { max-width: 1140px; margin-inline: auto; }
.home-head { max-width: 62ch; margin-bottom: 34px; }
.home-head h2 { font-size: clamp(26px, 3.6vw, 38px); }
.home-head p { color: var(--ink-muted); margin: 0; }

.dest-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Five countries: one row of five on a wide screen instead of four and a lonely fifth. */
@media (min-width: 1100px) { .dest-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; } }
.dest-card {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.dest-card:hover { box-shadow: 0 12px 34px rgba(20,38,61,.14); transform: translateY(-3px); }
.dest-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .5s ease; }
.dest-card:hover img { transform: scale(1.04); }
.dest-body { padding: 17px 18px 19px; }
.dest-body h3 { font-size: 21px; margin-bottom: .25em; }
.dest-card:hover h3 { color: var(--action); }
.dest-body p { font-size: 14px; color: var(--ink-muted); margin: 0 0 10px; }
.dest-meta { font-size: 12px; font-weight: 600; color: var(--action); }
.home-featured { padding-left: 0; padding-right: 0; }

.home-how { max-width: 1140px; margin: 0 auto; padding: 64px 32px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.how-steps li { position: relative; padding-top: 8px; border-top: 2px solid var(--coral); }
.how-n { display: block; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--action); margin-bottom: 10px; }
.how-steps h3 { font-size: 19px; margin-bottom: .35em; }
.how-steps p { font-size: 15px; color: var(--ink-muted); margin: 0; }

@media (max-width: 640px) {
  .home-hero-in { padding: 44px 22px; }
  .home-sec, .home-how, .home-strip { padding-left: 22px; padding-right: 22px; }
}

/* ══ MOTION & POLISH ══════════════════════════════════════════════════════════ */
/* Cards arrive in sequence rather than as a block. Pending state is applied by JS, so
   content is visible by default and a script failure costs nothing. */
.stagger-pending { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.stagger-in { opacity: 1; transform: none; }

/* Photographs lift and warm slightly on hover. Only transform and filter, so it stays
   on the compositor and never reflows the grid. */
.tour-card-img img, .dest-card img, .rel-card img { transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .35s ease; }
.tour-card:hover .tour-card-img img, .rel-card:hover img { transform: scale(1.045); }
.tour-card-img { overflow: hidden; }
.rel-card img, .tour-card-img img { will-change: transform; }

/* Links that underline from the left rather than appearing all at once. */
.tc-link, .fq-more a, .see-all-tours a { position: relative; }
.tc-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px;
  background: var(--action); transition: right .28s cubic-bezier(.2,.7,.3,1);
}
.tour-card:hover .tc-link::after { right: 0; }

/* Buttons get a touch of lift, not a bounce. */
.btn-primary, .btn-ghost, .btn-nav-cta, .qc-cta {
  transition: background .16s ease, transform .16s ease, box-shadow .2s ease, filter .16s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(39,79,156,.28); }
.btn-nav-cta:hover { transform: translateY(-1px); }

/* Day rows warm as you read down the itinerary. */
.day { transition: background .2s ease; border-radius: 6px; }
.day:hover { background: rgba(39,79,156,.035); }

/* The booking card lifts off the page just enough to read as the thing to act on. */
.book-card { transition: box-shadow .25s ease; }
.book-card:hover { box-shadow: 0 14px 40px rgba(20,38,61,.16); }

/* Filter pills */
.tour-filters button { transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; }
.tour-filters button:hover { transform: translateY(-1px); }

/* Finder options */
.fq-opt { transition: border-color .16s ease, box-shadow .2s ease, transform .16s ease, background .16s ease; }

/* Skeletons shimmer instead of sitting as a dead grey block while prices load. */
.pkg-skeleton {
  display: inline-block; width: 92px; height: 1em; vertical-align: middle;
  border-radius: 4px; background: linear-gradient(90deg, var(--tint) 25%, var(--shimmer) 37%, var(--tint) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Hero photographs drift on scroll; the scrim and the text stay put. */
.home-hero, .hero-photo, .tour-hero { background-position: 50% 50%; will-change: background-position; }

/* Anything animated stops the moment the reader asks it to. */
@media (prefers-reduced-motion: reduce) {
  .stagger-pending, .stagger-in { opacity: 1 !important; transform: none !important; }
  .pkg-skeleton { animation: none; }
}

/* ══ ABOUT ════════════════════════════════════════════════════════════════════ */
.about-hero {
  position: relative; margin: 18px auto 0; max-width: 1140px;
  min-height: clamp(280px, 40vh, 400px); display: flex; align-items: flex-end;
  background: var(--action) center/cover no-repeat; border-radius: 10px; overflow: hidden;
}
.about-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,32,.34) 0%, rgba(20,26,32,.16) 40%, rgba(20,26,32,.84) 100%);
}
.about-hero-in { position: relative; z-index: 1; padding: 34px 36px 30px; color: #fff; }
.about-hero .eyebrow { color: var(--eyebrow); }
.about-hero h1 { color: #fff; font-size: clamp(28px, 4.2vw, 46px); max-width: 18ch; margin-bottom: .3em; text-shadow: 0 2px 22px rgba(0,0,0,.4); }
.about-hero .lede { color: rgba(255,255,255,.93); max-width: 58ch; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.prose .about-table-wrap { overflow-x: auto; margin: 18px 0 10px; }
.about-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.about-table th, .about-table td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); }
.about-table thead th {
  font-family: var(--sans); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--action); font-weight: 700;
}
.about-table tbody th { font-weight: 600; }
.about-table tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--coral); }
.about-table tbody th a:hover { color: var(--action); }
.about-note { font-size: 14px; color: var(--ink-muted); font-style: italic; }
.about-nots { list-style: none; margin: 16px 0 0; padding: 0; }
.about-nots li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: 15px; }
.about-nots li::before { content: '×'; position: absolute; left: 2px; top: 10px; color: var(--action); font-size: 19px; font-weight: 700; }
.about-nots strong { color: var(--ink); }
.about-contact { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 18px; }
.about-contact-card {
  display: block; text-decoration: none; color: var(--ink); background: var(--tint);
  border: 1px solid var(--line); border-radius: 9px; padding: 18px;
  transition: border-color .16s ease, transform .16s ease, box-shadow .2s ease;
}
.about-contact-card:hover { border-color: var(--coral); transform: translateY(-2px); box-shadow: var(--shadow); }
.about-contact-card .ico { color: var(--action); margin-bottom: 9px; }
.about-contact-card strong { display: block; font-family: var(--sans); font-size: 17px; margin-bottom: 2px; }
.about-contact-card span { font-size: 13px; color: var(--ink-muted); word-break: break-word; }
@media (max-width: 640px) { .about-hero { border-radius: 0; margin-top: 0; } .about-hero-in { padding: 26px 22px 24px; } }

/* ══ COUNTRY PAGE ═════════════════════════════════════════════════════════════ */
.why-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.why-item { padding-top: 14px; border-top: 2px solid var(--coral); }
.why-item .ico { color: var(--action); width: 26px; height: 26px; margin-bottom: 12px; }
.why-item h3 { font-size: 19px; margin-bottom: .35em; }
.why-item p { font-size: 15px; color: var(--ink-muted); margin: 0; }

/* Real day tours from the pricing engine, shown as proof the page knows the country. */
.dest-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; }
.dest-chips li {
  font-size: 14px; color: var(--ink); background: var(--page);
  border: 1px solid var(--line); border-radius: 30px; padding: 8px 15px;
  transition: border-color .16s ease, transform .16s ease;
}
.dest-chips li:hover { border-color: var(--coral); transform: translateY(-1px); }
.hero-photo .btn-primary, .hero-photo .btn-ghost { text-decoration: none; display: inline-block; }

/* ══ SEARCH ═══════════════════════════════════════════════════════════════════ */
.btn-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-muted);
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-search svg { width: 17px; height: 17px; }
.btn-search:hover { border-color: var(--coral); color: var(--action); transform: translateY(-1px); }
.btn-search:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.ss-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,26,32,.55); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding: 10vh 20px 20px;
}
.ss-overlay[hidden] { display: none; }
.ss-panel {
  width: 100%; max-width: 640px; background: var(--page);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.35); animation: ssIn .18s ease;
}
@keyframes ssIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.ss-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ss-bar svg { width: 19px; height: 19px; color: var(--action); flex: none; }
.ss-bar input {
  flex: 1; font: inherit; font-size: 17px; border: 0; background: none; color: var(--ink);
  outline: none; -webkit-appearance: none; appearance: none;
}
.ss-close { background: none; border: 0; font-size: 27px; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 0 4px; }
.ss-close:hover { color: var(--ink); }
.ss-results { max-height: 54vh; overflow-y: auto; }
.ss-hit { display: flex; gap: 13px; align-items: center; padding: 11px 18px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.ss-hit:hover { background: var(--tint); }
.ss-hit img { width: 66px; height: 46px; object-fit: cover; border-radius: 5px; flex: none; }
.ss-body { display: flex; flex-direction: column; min-width: 0; }
.ss-body strong { font-family: var(--sans); font-size: 16px; line-height: 1.25; }
.ss-meta { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.ss-none { padding: 22px 18px; margin: 0; color: var(--ink-muted); font-size: 15px; }
.ss-none a { color: var(--action); }
.ss-hint { margin: 0; padding: 12px 18px; font-size: 12px; color: var(--ink-muted); background: var(--tint); }
.ss-hint a { color: var(--action); }
.ss-hint kbd {
  font: inherit; font-size: 11px; background: var(--page); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px;
}
@media (max-width: 640px) { .ss-overlay { padding: 6vh 12px 12px; } .ss-hit img { width: 54px; height: 40px; } }

/* ══ TRIP BUILDER ═════════════════════════════════════════════════════════════ */
.bd-routes { display: grid; gap: 12px; }
.bd-route {
  display: flex; gap: 14px; align-items: center; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: inherit;
  transition: border-color .16s ease, box-shadow .2s ease, transform .16s ease;
}
.bd-route:hover { border-color: var(--coral); box-shadow: 0 8px 24px rgba(20,38,61,.1); transform: translateY(-1px); }
.bd-route:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.bd-route img { width: 108px; height: 74px; object-fit: cover; border-radius: 6px; flex: none; }
.bd-route-b { display: flex; flex-direction: column; min-width: 0; }
.bd-route-b strong { font-family: var(--sans); font-size: 17px; line-height: 1.25; }
.bd-route-c { font-size: 13px; color: var(--action); font-weight: 600; margin-top: 3px; }
.bd-route-d { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.bd-form { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; }
.bd-form label { display: block; font-size: 13px; font-weight: 600; }
.bd-form input {
  width: 100%; font: inherit; font-size: 16px; font-weight: 400; margin-top: 6px;
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.bd-form input:focus { outline: 2px solid var(--action); outline-offset: -1px; border-color: var(--action); }
.bd-next { width: 100%; }

.bd-summary { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.bd-quote { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--coral); border-radius: 16px; padding: 22px; }
.bd-price { min-height: 58px; }
.bd-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.bd-facts li { font-size: 14px; }
.bd-facts span { display: block; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--action); font-weight: 700; }
.bd-hotels, .bd-inc { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.bd-hotels h4, .bd-inc h4 {
  font-family: var(--sans); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--action); font-weight: 700; margin: 0 0 8px;
}
.bd-hotels p { margin: 0 0 6px; font-size: 14px; }
.bd-inc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; font-size: 14px; color: var(--ink-muted); }
.bd-inc li { padding-left: 17px; position: relative; margin-bottom: 3px; break-inside: avoid; }
.bd-inc li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.bd-side { background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: 22px; position: sticky; top: 92px; }
.bd-side h3 { font-size: 19px; margin-bottom: .35em; }
.bd-side > p { font-size: 14px; color: var(--ink-muted); }
.bd-side .fq-restart { margin-top: 14px; }
@media (max-width: 940px) { .bd-summary { grid-template-columns: 1fr; } .bd-side { position: static; } }
@media (max-width: 520px) { .bd-inc ul { columns: 1; } .bd-route img { width: 84px; height: 60px; } }

/* ══ TOUCH TARGETS & MOBILE LEGIBILITY ════════════════════════════════════════ */
/* Apple and Google both put the minimum comfortable tap target at 44px. An audit at
   375px found 25 controls under 40, mostly card links a thumb has to hunt for. */

/* The whole card is the target, not the 58x22 "View trip" text inside it. A stretched
   link keeps one accessible anchor rather than nesting several over each other. */
.tour-card, .dest-card, .rel-card { position: relative; }
.tour-card h3 a::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.tour-card .tc-link, .tour-card .tour-card-img { position: relative; }
.tour-card .tc-link { z-index: 2; padding: 8px 0; }

/* Nav and footer links get real height without changing how they look. */
.nav-links a { padding: 11px 0; }
.foot-col a { padding: 6px 0; margin-bottom: 0; }          /* one per line, from the footer block rule */
.foot-legal a { display: inline-block; padding: 6px 0; }

.btn-search { width: 44px; height: 44px; }
.btn-search svg { width: 19px; height: 19px; }

/* Hero rating is a real link to real reviews; give it a thumb-sized target. */
.hero-rating a { display: inline-block; padding: 4px 0; }

@media (max-width: 700px) {
  .nav { gap: 12px; padding: 12px 18px; }
  .btn-nav-cta { padding: 12px 15px; }
  .hero-cta { gap: 12px; }
  .home-hero .hero-cta { flex-direction: column; align-items: stretch; }
  .home-hero .hero-cta > * { text-align: center; }
}
/* The brand and the rating link are still short; give them height without moving them. */
.brand { padding: 7px 0; }
.hero-rating a, .reviews-sub a, .cities-sub a { padding: 7px 0; display: inline-block; }

/* ══ SHORTLIST, SHARE, PRINT ══════════════════════════════════════════════════ */
.btn-saved {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-muted); text-decoration: none;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-saved svg { width: 18px; height: 18px; }
.btn-saved:hover { border-color: var(--coral); color: var(--action); transform: translateY(-1px); }
.sl-badge {
  position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px;
  background: var(--action); color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; padding: 0 4px;
}

/* Heart on a card. Sits above the stretched card link, which is why the handler stops
   propagation: saving must never navigate. */
.sl-heart {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.86); border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); backdrop-filter: blur(4px);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sl-heart svg { width: 18px; height: 18px; }
.sl-heart:hover { background: #fff; transform: scale(1.08); }
.sl-heart.sl-on { color: var(--action); }
.sl-heart.sl-on svg { fill: var(--action); }
.sl-heart:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

.sl-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 9px; padding: 11px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--page); color: var(--ink-muted); border: 1px solid var(--line); border-radius: 4px;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.sl-btn svg { width: 17px; height: 17px; }
.sl-btn:hover { border-color: var(--action); color: var(--action); }
.sl-btn.sl-on { color: var(--action); border-color: var(--action); background: rgba(39,79,156,.06); }
.sl-btn.sl-on svg { fill: var(--action); }
.saved-empty { color: var(--ink-muted); font-size: 16px; }
.saved-empty a { color: var(--action); }

/* ══ PRINT: a clean itinerary, and a PDF through the OS dialog ════════════════ */
@media print {
  .nav, .chat-fab, .chat-panel, .whatsapp-fab, .mobile-bar, .sticky-book,
  .tour-aside, .ss-overlay, #related, .foot-grid, .sl-btn, .sl-heart,
  .btn-primary, .btn-ghost, .crumbs, .tour-filters { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .tour-hero {
    min-height: auto; border-radius: 0; background: none !important; color: var(--ink);
    padding: 0; margin: 0; display: block; page-break-after: avoid;
  }
  .tour-hero::after { display: none; }
  .tour-hero-in { padding: 0; color: var(--ink); }
  .tour-hero h1 { color: var(--ink); text-shadow: none; font-size: 22pt; }
  .tour-hero .lede { color: #444; text-shadow: none; }
  .tour-grid { display: block; padding: 0; max-width: none; }
  .tour-facts { border-radius: 0; page-break-inside: avoid; }
  .tour-sec { page-break-inside: avoid; margin-bottom: 18pt; }
  .day { page-break-inside: avoid; }
  .inc-grid { display: block; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #666; }
  .foot { border-top: 1px solid #ccc; padding-top: 10pt; }
  .foot-legal { font-size: 8pt; color: #555; }
}

/* ══ TRUST BAND ═══════════════════════════════════════════════════════════════ */
/* The four things a stranger weighing a two thousand dollar purchase checks first,
   placed directly under the hero rather than buried near the footer. */
.trust-band {
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  max-width: 1140px; margin: 0 auto; padding: 30px 32px 34px;
  border-bottom: 1px solid var(--line);
}
.tb-item { display: flex; gap: 12px; align-items: flex-start; }
.tb-item .ico { color: var(--action); flex: none; margin-top: 2px; width: 22px; height: 22px; }
.tb-item strong { display: block; font-family: var(--sans); font-size: 16px; line-height: 1.25; }
.tb-item span { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 3px; }

/* ══ BRAND STORY ══════════════════════════════════════════════════════════════ */
.home-story { background: var(--action); color: #fff; padding: 62px 32px; }
.story-in { max-width: 720px; margin: 0 auto; }
.home-story .eyebrow { color: var(--eyebrow); }
.home-story h2 { color: #fff; font-size: clamp(26px, 3.6vw, 38px); }
.home-story h2.section-underline::after { background: var(--eyebrow); }
.home-story p { color: rgba(255,255,255,.86); font-size: 16px; }
.story-link { display: inline-block; margin-top: 10px; color: var(--eyebrow); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(191,230,250,.5); padding-bottom: 2px; }
.story-link:hover { border-color: var(--eyebrow); }

/* ══ MID-PAGE CTA ═════════════════════════════════════════════════════════════ */
/* The enquiry form used to be the ninth section. Someone convinced by section four
   needed a way to act without scrolling past five more. */
.mid-cta {
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--tint); border: 1px solid var(--line); border-left: 3px solid var(--coral);
  border-radius: 10px; padding: 22px 24px; margin: 0 0 46px;
}
.mid-cta strong { display: block; font-family: var(--sans); font-size: 19px; margin-bottom: 3px; }
.mid-cta span { font-size: 14px; color: var(--ink-muted); }
.mid-cta .btn-primary { text-decoration: none; white-space: nowrap; }

/* review aggregate line above per-tour reviews */
.rev-agg { font-size: 15px; color: var(--ink-muted); margin-bottom: 18px; }
.rev-agg strong { color: var(--ink); font-size: 17px; }
.rev-agg .review-stars { color: var(--coral); letter-spacing: 1px; margin-right: 6px; }
.rev-none { background: var(--tint); border: 1px solid var(--line); border-radius: 9px; padding: 20px; }
.rev-none p:last-child { margin: 0; font-size: 15px; color: var(--ink-muted); }
@media (max-width: 640px) {
  .trust-band { padding: 24px 22px 26px; gap: 20px; }
  .home-story { padding: 46px 22px; }
  .mid-cta { padding: 18px; }
}

/* ══ DESTINATION GUIDES ═══════════════════════════════════════════════════════ */
.guide-facts {
  max-width: 1140px; margin: 0 auto; padding: 0 32px;
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--line); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 10px 10px; overflow: hidden;
}
.guide-facts > div { background: var(--page); padding: 15px 18px; display: flex; gap: 11px; align-items: flex-start; }
.guide-facts .ico { color: var(--action); flex: none; margin-top: 2px; }
.guide-facts span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--action); font-weight: 700; margin-bottom: 3px; }
.guide-facts strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.prose .climate { margin: 16px 0 8px; }
@media (max-width: 640px) { .guide-facts { border-radius: 0; padding: 0 22px; } }
.gf-note { display: block; font-style: normal; font-size: 11px; color: var(--ink-muted); margin-top: 3px; font-weight: 400; }

/* ── hero search ───────────────────────────────────────────────────────────────
   The control a holiday site is expected to open with. It sits on a solid panel
   rather than floating on the photograph: the hero image is different on every
   country page and translucent controls over an unpredictable image is how these
   bars end up unreadable. */
.hero-search {
  display: grid; gap: 10px; align-items: end;
  grid-template-columns: 1.3fr 1.1fr .9fr auto;
  background: var(--page); border-radius: 6px;
  padding: 16px; margin: 26px 0 12px;
  box-shadow: 0 2px 4px rgba(20,26,32,.10), 0 18px 44px rgba(20,26,32,.26);
  max-width: 780px;
}
.hs-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hs-field label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
}
.hs-field select {
  font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 12px 11px; width: 100%; min-height: 46px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2356504a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
  padding-right: 30px;
}
.hs-field select:focus-visible { outline: 3px solid var(--action); outline-offset: 1px; }
.hs-go { min-height: 46px; white-space: nowrap; padding-inline: 22px; }
.hero-note {
  font-size: 13px; color: rgba(255,255,255,.92); max-width: 780px; margin: 0 0 18px;
  /* Sits over the photograph below the gradient's darkest corner, so it needs its own
     shadow to stay readable against whatever the image happens to be doing there. */
  text-shadow: 0 1px 3px rgba(10,14,18,.75);
}

@media (max-width: 860px) {
  .hero-search { grid-template-columns: 1fr 1fr; }
  .hs-go { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .hero-search { grid-template-columns: 1fr; padding: 14px; }
}

/* Group size the price was actually worked out for. Without it a per-person figure on a
   listing is ambiguous, and ambiguity in a price is what produces a complaint later. */
.tc-pax { display: block; font-size: 11px; color: var(--ink-muted); margin-top: 2px; }

/* On a phone the hero runs taller than the screen, so with the search sitting after the
   standfirst its button landed under the fixed bottom bar and was never fully in view.
   Promoting the search above the prose puts the thing a visitor came to use on screen
   immediately; the standfirst still follows it and still reads in source order for
   anything that ignores CSS. */
@media (max-width: 720px) {
  .home-hero-in { display: flex; flex-direction: column; }
  .home-hero-in .eyebrow { order: 1; }
  .home-hero-in h1 { order: 2; }
  .hero-search { order: 3; margin-top: 20px; }
  .hero-note { order: 4; }
  .home-hero-in .lede { order: 5; margin-bottom: 12px; }
  .hero-rating { order: 6; }
}

/* ── destination cards on a country page ──────────────────────────────────────
   A country page used to go straight from "why go here" to a list of trips, which
   left a reader with no sense of the country's shape and no idea what the place
   names on an itinerary meant. These also give the guides a route in from the
   pages people actually land on. */
.place-grid {
  max-width: 1140px; margin: 0 auto; padding: 0 32px;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.place-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--page); border: 1px solid var(--line); border-radius: 6px;
  padding: 20px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.place-card:hover, a.place-card:focus-visible {
  border-color: var(--action); transform: translateY(-2px); box-shadow: var(--shadow);
}
.place-card strong { font-family: var(--sans); font-size: 19px; line-height: 1.2; }
.place-card p { margin: 2px 0 0; font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.pl-stays {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--action);
}
.pl-more { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; color: var(--action); }
.place-card-plain { background: none; border-style: dashed; }

/* Eighteen guides in one flat grid read as a jumble, so the index groups them by
   country. The headings are also the phrase someone searching "Georgia destinations"
   is typing, which is the point of the page. */
.guides-index { padding-bottom: 8px; }
.guides-country {
  max-width: 1140px; margin: 34px auto 14px; padding: 0 32px;
  font-size: clamp(22px, 2.6vw, 29px);
}
.guides-country:first-child { margin-top: 6px; }
.guides-index .dest-grid { margin-bottom: 6px; }
@media (max-width: 640px) { .guides-country { padding: 0 22px; margin-top: 26px; } }

/* Available to a screen reader, absent from the page. Used where the visual design has
   no room for a heading but the document outline still needs the level. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── FAQ: native <details>, no script ─────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--ink); list-style-position: outside; }
.faq details > :not(summary) { margin-top: 0; }

/* Photo credit for free-licence photos (Wikimedia Commons), bottom-right of the hero. */
.tour-hero { position: relative; }
.hero-credit { position: absolute; z-index: 1; right: 12px; bottom: 8px; margin: 0; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.6); max-width: 70%; text-align: right; }
.hero-credit a { color: inherit; text-decoration: underline; }

/* A tour the owner has switched off in the admin page (catalogue-state.js). */
.trip-off { margin: 16px 0; padding: 14px 18px; border-radius: 8px; background: var(--white, #fff); border: 1px solid var(--border, #ddd); font-size: 15px; }
.trip-off a { margin-left: 4px; }

/* Interest links on /tours/ and the /tours/<theme>/ pages */
.theme-links { font-size: 14px; color: var(--ink-muted); margin: 4px 0 14px; line-height: 1.9; }
.theme-links a { color: var(--action); font-weight: 600; white-space: nowrap; }
.enq label small { font-weight: 400; color: var(--ink-muted); }
.lvl-switch { margin: 4px 0 14px; }

/* 'Plan your trip' on the country pages: the practical questions (money, plugs, time,
   language, how long) answered in one place, each line linked to its official source. */
.plan-grid {
  margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plan-item {
  background: var(--page); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px;
}
.plan-item dt {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--action);
  margin-bottom: 6px;
}
.plan-item dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.plan-src { display: inline-block; font-size: 13px; color: var(--action); }
.plan-meta { margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); }

/* ══ Component system (brand kit p13) ══════════════════════════════════════════
   One definition per control type, written last so it is the final word. Earlier
   rules still own layout (position, width, margins); this block owns how a control
   looks and behaves. Five families, and every interactive element is one of them:
     1. Primary button    Deep Blue fill. One per view: the action we want next.
     2. Secondary button  White, Deep Blue outline. The alternative action.
     3. Quiet button      White, grey outline, navy text. Utilities: save, share.
     4. Pill              Filters and chips. Selected = Deep Blue fill.
     5. Icon button       44px circle. Header and photo-corner actions.
   Calm by rule: colour changes on hover, nothing jumps or bounces. */

/* 1. Primary */
.btn-primary, .btn-nav-cta, .qc-cta, .chat-form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--action); color: #fff; border: 0; border-radius: 12px;
  font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  box-shadow: 0 1px 2px rgba(20,38,61,.12); cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.btn-primary, .qc-cta { min-height: 48px; padding: 12px 24px; font-size: 16px; }
.btn-primary:hover, .btn-nav-cta:hover, .qc-cta:hover, .chat-form button:hover {
  background: var(--action-hover); box-shadow: 0 4px 14px rgba(39,79,156,.24); transform: none;
}
.btn-primary:active, .btn-nav-cta:active, .qc-cta:active { background: var(--action-press); box-shadow: none; transform: none; }
.book-cta { display: flex; width: 100%; }

/* 2. Secondary */
.btn-quiet, .book-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 11px 20px; border-radius: 12px; cursor: pointer;
  background: #fff; color: var(--action); border: 1.5px solid var(--action);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn-quiet:hover { background: var(--tint); border-color: var(--action-hover); }
/* WhatsApp keeps its green so people can spot it, in a shade that passes AA (5.1:1). */
.book-wa { color: var(--ok); border-color: var(--ok); }
.book-wa:hover { background: #E7F4EC; }

/* 3. Quiet */
.sl-btn {
  min-height: 44px; border-radius: 12px; background: #fff;
  color: var(--ink); border: 1px solid var(--line);
}
.sl-btn:hover { border-color: var(--action); color: var(--action); background: #fff; }
.sl-btn.sl-on { background: var(--tint); }

/* Disabled, for every family: visibly off, never just faded colour. */
.btn-primary:disabled, .btn-quiet:disabled, .qc-cta:disabled, .chat-form button:disabled,
.enq button[disabled], [aria-disabled="true"].btn-primary {
  background: #C9D2DD; color: var(--ink-muted); border-color: #C9D2DD;
  box-shadow: none; cursor: not-allowed; opacity: 1;
}

/* Segmented control: tier, currency and hotel choice on the booking card. A track
   with the chosen option lifted out in white, so the state reads without colour. */
.book-cur {
  gap: 4px; padding: 4px; background: var(--tint); border-radius: 12px;
}
.book-cur button {
  min-height: 40px; padding: 6px 4px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-muted); font-size: 13px; font-weight: 600;
}
.book-cur button:not(.cur-on):hover { color: var(--action); background: rgba(255,255,255,.6); }
.book-cur .cur-on {
  background: #fff; color: var(--action); font-weight: 700;
  box-shadow: 0 1px 2px rgba(20,38,61,.10), 0 2px 8px rgba(20,38,61,.08);
}

/* 4. Pills */
.tour-filters button, .dest-chips li {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600;
}
.tour-filters button:hover, .dest-chips li:hover { border-color: var(--action); color: var(--action); transform: none; }
.tour-filters .tf-on, .tour-filters .tf-on:hover { background: var(--action); border-color: var(--action); color: #fff; }

/* 5. Icon buttons */
.btn-menu, .btn-search, .btn-saved, .sl-heart, .sb-wa {
  width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff;
  border: 1px solid var(--line); transition: border-color .15s ease, color .15s ease;
}
.btn-search:hover, .btn-saved:hover, .btn-menu:hover { border-color: var(--action); color: var(--action); transform: none; }
.sl-heart { border-color: transparent; box-shadow: 0 1px 4px rgba(20,38,61,.18); }
.sl-heart:hover { transform: none; color: var(--action); }

/* Floating chat: a pill, same blue, same calm hover. */
.chat-fab { border-radius: 999px; transition: background .15s ease; }
.chat-fab:hover { filter: none; background: var(--action-hover); }

/* Cards that are links: border and shadow answer the hover, no jump. */
.fq-opt:hover, .bd-route:hover, .about-contact-card:hover {
  border-color: var(--action); background: #fff; transform: none;
}
.tour-card:hover, .dest-card:hover { transform: none; box-shadow: 0 10px 30px rgba(20,38,61,.12); }

/* The footer's one button was 23px tall; match the links around it. */
.foot-link-btn { padding: 6px 0; text-align: left; }

/* Bottom bar on phones: one colour for all three, WhatsApp keeps its green icon. */
.mobile-bar-chat { color: var(--action); }

/* Phones and tablets: every control reaches the 44px touch minimum. */
@media (pointer: coarse) {
  .book-cur button, .tour-filters button, .dest-chips li { min-height: 44px; }
}

/* Small phones: logo, search, CTA and menu must fit in 360px without the 44px icon
   circles being squeezed into ovals. Saved trips is still one tap away in the menu. */
@media (max-width: 420px) {
  .nav { gap: 8px; padding: 10px 14px; }
  .nav .btn-saved { display: none; }
  .btn-nav-cta { padding: 9px 14px; }
}

.foot-offices strong { display: block; color: var(--ink); font-weight: 700; }