/* ---------------------------------------------------------------
   Post-Webflow additions (not responsive work)
   --------------------------------------------------------------- */

/* "More Experiences" CTA under the curated-experiences grid.
   .btn is inline-flex, so text-align centres it; .btn-navy already
   carries margin-top: 40px. */
.exp-more { text-align: center; }

/* Language toggle (EN | RU). The draft shipped "EN | RU" as dead text. */
.lang-link {
  color: inherit;
  text-decoration: none;
  opacity: .5;
  transition: opacity .2s, color .2s;
}
.lang-link:hover { opacity: 1; }
.lang-link.is-active { opacity: 1; color: var(--gold); }
.lang-sep { opacity: .3; margin: 0 6px; }

/* Footer legal block: copyright above, Travel Industry Authority licence
   number beneath it. Wrapped so .div-block-9 still sees two flex children. */
.footer-legal { display: flex; flex-direction: column; grid-row-gap: 4px; }
.footer-licence { letter-spacing: .04em; }

/* Message box: the browser default lets the drag handle resize both axes, so
   dragging sideways pushed the textarea past the form column. Vertical only. */
.textarea {
  resize: vertical;
  max-width: 100%;
  min-height: 132px;
}

/* Footer bottom bar. The draft drew a full 1px box around it, which reads as
   a stray rectangle rather than a divider, and gave it top padding only so the
   text hugged the bottom edge. A single rule above it, balanced padding, and
   the separator spacing moved from padding-left onto a flex gap. */
.div-block-9 {
  border: 0;
  border-top: 1px solid #f5efe41a;
  align-items: flex-start;
  padding-top: 28px;
  padding-bottom: 4px;
  margin-top: 56px;
}
.div-block-9 > div:last-child {
  display: flex;
  align-items: center;
  grid-column-gap: 6px;
}
.div-block-9 .text-block-privacy { padding-left: 0; }
.link-block-privacy { transition: opacity .2s; }
.link-block-privacy:hover { opacity: .75; }

/* Curated-experience plates: the caption sits over the photo, and on the
   bright images (yacht saloon, calligraphy paper) it had almost no contrast.
   A white scrim fades up from the bottom; the caption goes navy, because the
   original soft gold (#d4b87ab3) on white is only ~2.3:1.
   ::after would paint over the inset border, so the border box is lifted
   above it with z-index. */
.exp-grid .cmp-plate::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top,
              rgba(255, 255, 255, .72) 0%,
              rgba(255, 255, 255, .46) 45%,
              rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.exp-grid .div-block-5 { z-index: 2; }

.exp-grid .text-block-4 {
  color: var(--navy);
  opacity: .85;
}

/* ---------------------------------------------------------------
   Seven Destinations — manual slider

   The strip was a 7-column grid, which meant seven thumbnails squeezed
   across on desktop and a very long stack on phones. It is now a
   scroll-snapping row: still until swiped or arrowed. The CSS works on
   its own; destinations.js only adds the arrows and dots.
   --------------------------------------------------------------- */
.dest-slider { position: relative; }

.dest-strip-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dest-strip-grid::-webkit-scrollbar { display: none; }

.dest-strip-grid > .dest-card {
  flex: 0 0 25%;
  min-width: 0;
  scroll-snap-align: start;
}

.dest-arrow {
  position: absolute;
  top: 34%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(6, 26, 46, .72);
  color: var(--gold-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s, opacity .2s, border-color .2s;
  z-index: 2;
}
.dest-arrow:hover { background: var(--navy-hover); }
.dest-arrow:disabled { opacity: .25; cursor: default; }
.dest-arrow.is-prev { left: -14px; }
.dest-arrow.is-next { right: -14px; }

.dest-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.dest-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 239, 228, .28);
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.dest-dot.is-active { background: var(--gold-soft); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .dest-strip-grid { scroll-behavior: auto; }
  .dest-dot { transition: none; }
}

/* ============================================================
   Amist v2 — responsive layer
   Loaded AFTER webflow.css. Every rule lives inside a
   max-width media query, so the desktop design (>991px) is
   left byte-for-byte identical to the Webflow original.

   Webflow breakpoints:  991 = tablet · 767 = phone · 479 = small phone
   ============================================================ */

/* ---------- universal overflow guards (safe at all widths) ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
img, video { max-width: 100%; }

/* ============================================================
   TABLET  ≤ 991px
   ============================================================ */
@media screen and (max-width: 991px) {

  /* ---- type scale ---- */
  .h1-display, .h1-display-italic { font-size: 64px; line-height: 62px; }
  .h2-section, .h2-section-italic { font-size: 40px; line-height: 44px; }
  .h3-sub { font-size: 24px; line-height: 30px; }

  /* ---- section rhythm ---- */
  .section-px { padding-left: 40px; padding-right: 40px; }
  .section { padding: 64px 40px 32px; }

  /* ---- hero: stack the copy above the image ---- */
  .section-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
  }
  .section-2 > * { min-width: 0; }

  /* ---- every 2-column split collapses ---- */
  .intro-grid,
  .grid, .grid-3, .grid-4, .grid-7, .grid-8,
  .container-6, .div-block-13, .div-block-4,
  .section-5 {
    grid-template-columns: 1fr;
  }

  /* ---- destination strip: 7 across is unreadable, go 3 ---- */
  .dest-strip-grid { grid-template-columns: repeat(3, 1fr); }

  /* ---- experiences + 4-up grids ---- */
  .exp-grid, .grid-2 { grid-template-columns: repeat(2, 1fr); }

  /* ---- footer ---- */
  .div-block-7 { grid-template-columns: 1fr 1fr; grid-row-gap: 36px; }

  /* ---- inset frames / index labels shrink with the plate ---- */
  .cap-plate__inset { inset: 20px; }
  .cmp-plate__index { top: 18px; right: 18px; }

  /* ============ NAVIGATION ============
     The original markup uses a custom .nav-hamburger div rather than
     Webflow's .w-nav-button, so Webflow's own menu script never binds
     to it — and a designer rule forces .nav-menu back to display:flex
     at this breakpoint. Result: squashed links plus a dead icon.
     Below, the links become a real drawer driven by responsive.js. */

  .cmp-nav { padding: 18px 40px; position: relative; }

  .nav-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    cursor: pointer;
    z-index: 3;
  }

  .nav-menu.nav-links-wrapper {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;

    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    grid-column-gap: 0;
    grid-row-gap: 0;

    background-color: var(--navy-deep, #061a2e);
    padding: 8px 40px 24px;

    /* closed state */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .38s ease, opacity .28s ease, visibility .28s;
  }

  .nav-menu.nav-links-wrapper.is-open {
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
  }

  .nav-menu.nav-links-wrapper .nav-link {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(245, 239, 228, .1);
    color: var(--ivory, #f5efe4);
    font-size: 15px;
  }

  /* the EN|RU + Plan Journey cluster is relocated into the drawer by JS */
  .nav-menu.nav-links-wrapper .div-block-3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding-top: 20px;
  }
  .nav-menu.nav-links-wrapper .div-block-3 .text-block-2 { color: rgba(245, 239, 228, .7); }

  /* hamburger morphs to a close mark while open */
  .nav-hamburger.is-open .icon { transform: rotate(90deg); transition: transform .3s; }

  body.nav-open { overflow: hidden; }
}

/* ============================================================
   PHONE  ≤ 767px
   ============================================================ */
@media screen and (max-width: 767px) {

  .h1-display, .h1-display-italic { font-size: 46px; line-height: 46px; }
  .h2-section, .h2-section-italic { font-size: 30px; line-height: 34px; }
  .h3-sub { font-size: 21px; line-height: 27px; }

  /* the original sets padding-left:24px here but leaves padding-right
     at 80px, pushing content off-centre — fixed */
  .section-px { padding-left: 24px; padding-right: 24px; }
  .section { padding: 52px 24px 28px; }
  .cmp-nav { padding: 16px 24px; }
  .nav-menu.nav-links-wrapper { padding: 8px 24px 24px; }

  /* single column everywhere that still had two */
  .dest-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-grid, .grid-2, .feature-grid, .div-block-7 { grid-template-columns: 1fr; }
  .div-block-7 { grid-row-gap: 30px; }

  /* stacked cards need breathing room between rows */
  .feature-grid, .exp-grid { grid-row-gap: 32px; }

  .cap-plate__inset { inset: 14px; }
  .cmp-plate__index { top: 14px; right: 14px; }

  /* buttons go full-width so they are comfortable to tap */
  .link-block, .w-inline-block.link-block { min-height: 48px; }
}

/* ============================================================
   SMALL PHONE  ≤ 479px
   ============================================================ */
@media screen and (max-width: 479px) {

  .h1-display, .h1-display-italic { font-size: 38px; line-height: 38px; }
  .h2-section, .h2-section-italic { font-size: 26px; line-height: 30px; }
  .h3-sub { font-size: 19px; line-height: 25px; }

  .section-px { padding-left: 20px; padding-right: 20px; }
  .section { padding: 44px 20px 24px; }
  .cmp-nav { padding: 14px 20px; }
  .nav-menu.nav-links-wrapper { padding: 8px 20px 20px; }

  /* destinations one-up so each photo reads properly */
  .dest-strip-grid { grid-template-columns: 1fr; grid-row-gap: 12px; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-menu.nav-links-wrapper,
  .nav-hamburger.is-open .icon { transition: none; }
}

/* ============================================================
   PHONE PASS 2 — 20 Aug 2026

   The first pass reduced padding only on `.section-px` and `.section`.
   Every real content section (.home-intro, .section-4, .section-9,
   .section-10, .grid-3, .grid-4 …) kept its desktop `padding: 140px 80px`,
   so on a 390px screen the copy was squeezed into ~230px with enormous
   vertical gaps. These rules bring the whole section family down together.
   ============================================================ */

@media screen and (max-width: 991px) {

  .home-intro, .destination-home, .section-4, .home-b2b,
  .section-7, .section-8, .section-9, .section-10 { padding: 72px 40px; }

  .grid-3, .grid-4 { padding: 72px 40px; grid-column-gap: 48px; grid-row-gap: 48px; }
  .grid-7, .grid-8 { grid-column-gap: 48px; grid-row-gap: 48px; }

  .div-block-10 { padding: 72px 40px; }
  .footer-dark  { padding: 64px 40px 32px; }

  /* Once the enquiry grid stacks, a left-hand rule and an 80px indent
     make no sense — it becomes a divider above the contact details. */
  .div-block-18 {
    border-left: 0;
    border-top: 1px solid var(--stone);
    padding-left: 0;
    padding-top: 40px;
  }

  /* The draft sets 18px type on 17px leading. Fine for one short desktop
     line, crushed once it wraps to eight lines on a phone. */
  .body-lead { line-height: 1.5; }
  .body      { line-height: 1.6; }
}

@media screen and (max-width: 767px) {

  .home-intro, .destination-home, .section-4, .home-b2b,
  .section-7, .section-8, .section-9, .section-10 { padding: 56px 24px; }

  .grid-3, .grid-4 { padding: 56px 24px; grid-column-gap: 32px; grid-row-gap: 32px; }
  .grid-7, .grid-8 { grid-row-gap: 36px; }

  .div-block-10 { padding: 56px 24px; }
  .footer-dark  { padding: 52px 24px 28px; }
  .div-block-18 { padding-top: 32px; }

  /* Hero CTAs sat side by side and broke "PLAN JOURNEY" across two lines
     inside its own box. Stacked and full-width, they also clear the 48px
     tap target. */
  .div-block-11 { flex-direction: column; align-items: stretch; grid-row-gap: 12px; margin-top: 32px; }
  .div-block-11 .btn { width: 100%; justify-content: center; }

  /* The message box was short enough to clip its own placeholder. */
  .textarea { min-height: 132px; }

  /* Stacked destination cards do not need a vertical rule between them. */
  .dest-card { border-right: 0; padding-bottom: 24px; }

  .exp-grid { margin-top: 32px; }
  .div-block-15 { text-align: center; }
}

@media screen and (max-width: 479px) {

  .home-intro, .destination-home, .section-4, .home-b2b,
  .section-7, .section-8, .section-9, .section-10 { padding: 48px 20px; }

  .grid-3, .grid-4 { padding: 48px 20px; }
  .div-block-10 { padding: 48px 20px; }
  .footer-dark  { padding: 44px 20px 24px; }
}

@media screen and (max-width: 767px) {
  /* .grid-5 (About → "Experiences Uniquely Yours") declares no columns, so it
     inherited Webflow's default 1fr 1fr and never collapsed at any width.
     Stacked on mobile only, at the owner's request; source order is image
     then copy, so the plate lands on top and the text runs full width. */
  .grid-5 { grid-template-columns: 1fr; grid-row-gap: 32px; }

  /* Stacked feature cells kept 64px of vertical padding each, so ~128px of
     dead space opened between "01", "02" and "03". The right-hand rule that
     separated the columns becomes a rule between rows. `.section-3` has no
     padding of its own, so the cell must keep its own side padding. */
  .feature-grid { grid-row-gap: 0; }
  .feature-cell {
    border-right: 0;
    border-bottom: 1px solid var(--stone);
    padding: 32px 24px;
  }
  .feature-cell.is-last { border-bottom: 0; }
}

@media screen and (max-width: 991px) {
  /* .grid-5 (About → "Experiences Uniquely Yours") declares no columns at
     all, so it inherited Webflow's default 1fr 1fr and stayed two-up at
     every width — phones included. It was missing from the collapse list
     above. Source order is image then copy, so stacking puts the plate on
     top and the text beneath it, full width. */
  /* mobile only — see the ≤767 block; tablet keeps two columns */
}

/* ---- destinations slider: cards per view ---- */
@media screen and (max-width: 991px) {
  .dest-strip-grid > .dest-card { flex-basis: 40%; }
}
@media screen and (max-width: 767px) {
  .dest-strip-grid > .dest-card { flex-basis: 62%; }
}
@media screen and (max-width: 479px) {
  .dest-strip-grid > .dest-card { flex-basis: 82%; }
}

/* ============================================================
   Sticky mobile nav — 20 Aug 2026

   `position: sticky` is not an option here: the `overflow-x: hidden`
   guard on html/body makes them a scroll container, which disables it.
   So the bar is fixed and `body` is padded by the bar's measured height
   (80 / 76 / 72px at the three breakpoints) to replace the space it
   vacates. The drawer is absolutely positioned at `top: 100%` of the
   bar, so it still hangs correctly beneath it.
   ============================================================ */
@media screen and (max-width: 991px) {
  .cmp-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: var(--cream);
    box-shadow: 0 1px 12px rgba(10, 37, 64, .08);
  }
  /* the transparent-over-hero variant must not apply once the bar is pinned */
  .cmp-nav.is-over-hero { background-color: var(--cream); }

  body { padding-top: 80px; }
}
@media screen and (max-width: 767px) { body { padding-top: 76px; } }
@media screen and (max-width: 479px) { body { padding-top: 72px; } }

@media screen and (max-width: 767px) {
  /* Hero plate captions: "Featured" (bottom: 56px) and the title
     (bottom: 28px) are both absolutely positioned at fixed offsets. Once the
     title wraps to two lines on a phone it grows upward and collides with the
     label. Anchoring them in normal flow at the bottom of the inset makes the
     gap independent of how many lines the title takes. Scoped to .section-2
     so the destination and enquiry plates keep their own treatment. */
  .section-2 .cmp-plate__inset {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 20px;
  }
  .section-2 .cmp-plate__index_featured {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .section-2 .cmp-plate__caption_featured {
    position: static;
    inset: auto;
    margin: 0 0 10px;
    text-align: right;
  }
  .section-2 .cmp-plate__caption_featured.cmp-plate_caption_featured2 {
    position: static;
    inset: auto;
    margin: 0;
    font-size: 20px;
    line-height: 26px;
  }
}


/* Curated experiences: 2 x 2 on phones.
   The four cards were stacked one-up below 767px, which made that section
   scroll on and on. Two columns keeps all four in view as a square block.
   Desktop (4 across) and tablet (2 across) are unchanged. */
@media screen and (max-width: 767px) {
  .exp-grid {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 14px;
    grid-row-gap: 28px;
  }
  .exp-grid .h3-sub { font-size: 17px; line-height: 22px; }
  .exp-grid .body   { font-size: 13px; line-height: 1.5; }
  .exp-grid .text-block-5 { font-size: 11px; }
  .exp-grid .text-block-4 { font-size: 8px; letter-spacing: .14em; }
  .exp-grid .text-block-3 { font-size: 13px; }
  .exp-grid .div-block-5  { inset: 8px; }
}

/* phones swipe; arrows would only cover the photo */
@media screen and (max-width: 767px) {
  .dest-arrow { display: none; }
}

@media screen and (max-width: 767px) {
  /* Footer bottom bar: a space-between flex with a full 1px border box. On a
     phone the two halves squeeze together, breaking "· Hong Kong" onto its own
     line and leaving the standalone "·" link floating. Stacked, with the box
     reduced to a single rule above it. */
  .div-block-9 {
    flex-direction: column;
    grid-row-gap: 14px;
    margin-top: 32px;
    padding-top: 20px;
  }
  .text-block-8 { line-height: 1.6; }
}

/* Anchor offset for the fixed mobile bar.
   #services / #destinations scrolled flush to the viewport top, which put
   their headings behind the pinned nav. scroll-margin-top reserves the bar's
   height (80/76/72) plus a little breathing room. */
@media screen and (max-width: 991px) {
  #services, #destinations { scroll-margin-top: 92px; }
}
@media screen and (max-width: 767px) {
  #services, #destinations { scroll-margin-top: 88px; }
}
@media screen and (max-width: 479px) {
  #services, #destinations { scroll-margin-top: 84px; }
}

/* ---------------------------------------------------------------------------
   Legal pages (/privacy, /terms)

   Webflow never exported a long-form text layout — every section it drew is a
   grid of cards or an image plate. These two pages are the only ones on the
   site that are pure prose, so the measure, the heading rhythm and the list
   styling all live here rather than in webflow.css.

   Note .body ships as 15px type on a 17.5px line-height, which is fine for a
   two-line card caption and unreadable over a paragraph; .legal-p resets the
   leading to 1.75 without touching .body itself.
   --------------------------------------------------------------------------- */
.legal-hero,
.legal-body { background-color: var(--cream); }

.legal-hero {
  padding: 140px 80px 0;
  text-align: center;
}
.legal-body { padding: 56px 80px 140px; }

.legal-wrap {
  max-width: 760px;          /* ~85 characters at 16px — a comfortable measure */
  margin-left: auto;
  margin-right: auto;
}

.legal-title { font-size: 72px; line-height: 76px; }

.ornament.legal-ornament {
  margin-top: 28px;
  margin-bottom: 20px;
}

.legal-updated {
  color: var(--ink-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 0;
}

.legal-section { margin-top: 48px; }
.legal-section:first-child { margin-top: 0; }

.legal-h {
  font-size: 26px;
  line-height: 32px;
  margin-bottom: 16px;
}

.legal-p {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}
.legal-p:last-child { margin-bottom: 0; }

.legal-list {
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: disc;
}
.legal-list li { margin-bottom: 8px; }
.legal-list li::marker { color: var(--gold); }

.legal-address { color: var(--navy); }

.legal-link {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-link:hover { color: var(--gold); }

@media screen and (max-width: 991px) {
  .legal-hero { padding: 96px 40px 0; }
  .legal-body { padding: 48px 40px 96px; }
  .legal-title { font-size: 54px; line-height: 58px; }
}

@media screen and (max-width: 767px) {
  /* Matches the 56px/24px section padding the rest of the site drops to on a
     phone; the hero keeps a little extra top so it clears the fixed nav bar. */
  .legal-hero { padding: 72px 24px 0; }
  .legal-body { padding: 40px 24px 56px; }
  .legal-title { font-size: 40px; line-height: 44px; }
  .legal-h { font-size: 22px; line-height: 28px; }
  .legal-section { margin-top: 36px; }
}

@media screen and (max-width: 479px) {
  .legal-title { font-size: 34px; line-height: 38px; }
}