/* ═══════════════════════════════════════════════════════════════════
   Direction A — "The Long Way Home"
   A journey out, and a return transformed. One route line travels the
   page through four chapters: Departure → Formats → Ingredients →
   Where the route leads → Arrival (enquiry).
   Token mapping (DESIGN.md): teal #00C2B2, teal-deep #009b8e,
   blue #1A73E8, ground #F4F5F6, surface #E4E8EC, dark #1C2321,
   dark-accent #313B3A, ink #2C3E50, muted #7F8C8D, muted-ui #A1A1AA.
   ═══════════════════════════════════════════════════════════════════ */

.ota-page {
  --teal: #00C2B2;
  --teal-deep: #009b8e;
  --blue: #1A73E8;
  --ground: #F4F5F6;
  --surface: #E4E8EC;
  --paper: #ffffff;
  --dark: #1C2321;
  --dark-accent: #313B3A;
  --ink: #2C3E50;
  --muted: #7F8C8D;
  --muted-ui: #A1A1AA;
  --route-x: clamp(2.25rem, 6vw, 7rem);
  --shell-pad: 1.5rem;
  overflow: clip;
  background: var(--ground);
  color: var(--ink);
}

.ota-shell {
  position: relative;
  width: min(82.5rem, calc(100% - 2 * var(--shell-pad)));
  margin-inline: auto;
}

/* ── Hero — HKICF family architecture ─────────────────────────── */

.ota-hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--dark);
}

.ota-hero__media,
.ota-hero__poster,
.ota-hero__video,
.ota-hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ota-hero__poster,
.ota-hero__video {
  object-fit: cover;
  object-position: center 42%;
}

.ota-hero__video { display: none; }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .ota-hero__video { display: block; }
}

.ota-hero__scrim {
  background:
    linear-gradient(to bottom, color-mix(in srgb, black 62%, transparent), transparent 38%, color-mix(in srgb, black 78%, transparent)),
    linear-gradient(to right, color-mix(in srgb, black 58%, transparent), transparent 66%);
}

.ota-hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: 10rem;
}

.ota-hero__eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 78%, transparent);
}

.ota-hero h1 {
  max-width: 62rem;
  margin: 0;
  font-size: clamp(3.25rem, 6.3vw, 5.8rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0;
}

.ota-hero h1 span { display: block; }

.ota-hero__lede {
  margin: 1.75rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, white 82%, transparent);
}

.ota-hero__curve {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 6rem;
  pointer-events: none;
  color: var(--ground);
}

/* ── The journey canvas ───────────────────────────────────────── */

.ota-journey {
  position: relative;
  padding-top: clamp(3rem, 7vh, 5.5rem);
}

/* The route treatment returned: a measured dotted flight path (SVG built
   by overseas-tour.js) threads the waypoint dots and lands on the enquiry
   stage. Without JS the dots and boarding-pass tags stand on their own. */

/* ── Chapters ─────────────────────────────────────────────────── */

/* Waypoints sit in one left-hand corridor; content is inset clear of it. */
.ota-chapter {
  position: relative;
  padding: clamp(4rem, 9vh, 7rem) 0;
  --corridor: calc(var(--route-x) + 3rem);
  --inset-start: var(--corridor);
  --dot-side-start: var(--route-x);
}

.ota-chapter__grid {
  position: relative;
}

/* Narrow blocks only need the start inset. On a right-corridor chapter that
   resolves to 0, so copy sits flush left and the route owns the right edge —
   the alternation reads as intended. Adding padding-right here would fight
   border-box max-width and crush the measure. */
.ota-chapter__body {
  padding-left: var(--inset-start);
  max-width: 62rem;
}

.ota-chapter__head {
  padding-left: var(--inset-start);
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.ota-chapter__head--wide { max-width: 56rem; }

.ota-chapter__kicker {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--teal-deep);
}

.ota-chapter__head h2,
.ota-chapter__body h2 {
  margin: 0;
  font-size: clamp(2.25rem, 4.5vw, 4.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ota-chapter__intro {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42rem;
  text-wrap: pretty;
}

/* Statement chapter */
.ota-statement {
  font-size: clamp(1.9rem, 3.6vw, 3.4rem) !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
}

.ota-chapter__meta {
  margin: 2.25rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

#main-content { position: relative; }

/* ── The route line (measured + drawn in JS) ────────────────────── */

.ota-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3; /* the line keeps to the corridor; waypoints (z4) sit above */
}

.ota-route__line {
  fill: none;
  stroke: var(--teal-deep);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 13;
  opacity: 0.7;
}

.ota-route__plane { color: var(--teal-deep); }

/* Arrival — the line lands on the dark enquiry stage */
.ota-arrival {
  position: absolute;
  z-index: 4;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px var(--dark);
  transition: background 0.4s ease, transform 0.4s ease;
}

.ota-arrival.is-stamped { background: var(--teal); transform: scale(1.25); }

/* ── Waypoints on the route ───────────────────────────────────── */

.ota-waypoint {
  position: absolute;
  left: var(--dot-side-start);
  top: clamp(4rem, 9vh, 7rem);
  z-index: 4;
  display: flex;
  align-items: center;
}

.ota-chapter--statement .ota-waypoint { top: clamp(4.4rem, 9.5vh, 7.4rem); }

.ota-waypoint__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px var(--ground);
  transition: background 0.4s ease, transform 0.4s ease;
}

.ota-waypoint.is-stamped .ota-waypoint__dot {
  background: var(--teal);
  transform: scale(1.25);
}

/* Boarding-pass waypoint tags (HKG / KUL / SIN).
   Chapter tags hang ABOVE their dot, tied to the line in the chapter's
   padding whitespace — to the right they covered the opening words. */
.ota-waypoint__stamp {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: calc(100% + 12px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.7rem 0.4rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 5px 9px 9px 5px;
  background: var(--paper);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: -2deg;
}

/* punch hole at the tag's bottom edge — the tie point on the line */
.ota-waypoint__stamp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: auto;
  bottom: -2.5px;
  translate: -50% 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}

.ota-waypoint__code {
  display: block;
  line-height: 1.15;
}

.ota-waypoint__stamp small {
  display: block;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* perforated stub carrying the plane glyph */
.ota-waypoint__perf {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-left: 0.55rem;
  border-left: 1px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  color: var(--teal-deep);
}

.ota-waypoint__perf svg {
  display: block;
  width: 13px;
  height: 13px;
}

/* Tags land as the route line reaches each waypoint (JS only) */
.ota-journey.tags-live .ota-waypoint__stamp {
  opacity: 0;
  translate: -50% 8px;
  transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.5s ease;
  rotate: -6deg;
}

.ota-journey.tags-live .ota-waypoint.is-stamped .ota-waypoint__stamp {
  opacity: 1;
  translate: -50% 0;
  rotate: -2deg;
}

.ota-waypoint--plain .ota-waypoint__stamp { display: none; }

/* Inline card tags (KUL / SIN) keep their rightward hang over the card edge */
.ota-waypoint--inline .ota-waypoint__stamp {
  left: 22px;
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
  rotate: -1.5deg;
}

.ota-waypoint--inline .ota-waypoint__stamp::before {
  left: 4px;
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
}

.ota-journey.tags-live .ota-waypoint--inline .ota-waypoint__stamp { translate: -8px -50%; }
.ota-journey.tags-live .ota-waypoint--inline.is-stamped .ota-waypoint__stamp { translate: 0 -50%; }

/* ≥1200px: chapter tags shift left so the plane icon, punch-hole, and dot
   share one vertical line — the tag body hangs into the page margin,
   clear of the text column. Below 1200px the centered hang stays. */
@media (min-width: 1200px) {
  .ota-journey .ota-waypoint:not(.ota-waypoint--inline) .ota-waypoint__stamp {
    translate: calc(18px - 100%) 0;
  }
  .ota-journey .ota-waypoint:not(.ota-waypoint--inline) .ota-waypoint__stamp::before {
    left: auto;
    right: 15px;
    translate: 0 0;
  }
  .ota-journey.tags-live .ota-waypoint:not(.ota-waypoint--inline) .ota-waypoint__stamp {
    translate: calc(18px - 100%) 8px;
  }
  .ota-journey.tags-live .ota-waypoint.is-stamped:not(.ota-waypoint--inline) .ota-waypoint__stamp {
    translate: calc(18px - 100%) 0;
  }
}

.ota-waypoint--inline {
  /* Lifted out of flow so the card has no dead space above its heading.
     The dot stays on the route in the corridor while the tag hangs over the
     card's top edge — a tag tied to the case. */
  position: absolute;
  left: -3rem;
  right: auto;
  top: -1.05rem;
  grid-column: auto;
  margin: 0;
  min-height: 0;
}

/* ── Format tickets ───────────────────────────────────────────── */

.ota-tickets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: var(--inset-start);
}

/* The ticket is a wrapper of separate paper parts — photo, main, and the
   tear-off stub — each with its own background and border. The wrapper is
   transparent, so a peeled stub reveals the page background (not card
   white), and the perforation scar stays on the main ticket's edge. */
.ota-ticket {
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.ota-ticket__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 1.5rem 1.5rem 0 0;
}

.ota-ticket__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 0.6s ease;
}

.ota-ticket:hover .ota-ticket__photo img,
.ota-ticket:focus-within .ota-ticket__photo img { scale: 1.04; }

.ota-ticket__photo figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dark) 72%, transparent);
  color: white;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ota-ticket__row {
  display: flex;
  flex: 1;
  perspective: 900px;
}

/* Stub mid-peel (overseas-tour.js tear interaction) */
.ota-ticket__stub.ota-peeling {
  box-shadow: -10px 14px 28px rgba(28, 35, 33, 0.28);
  z-index: 5;
}

.ota-ticket:hover,
.ota-ticket:focus-within {
  transform: translateY(-6px);
  filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--teal) 16%, transparent));
}

.ota-ticket__main {
  flex: 1;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-top: 0;
  border-right: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 0 0 0 1.5rem;
}

.ota-ticket__no {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}

.ota-ticket h3 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.ota-ticket__main p:last-child {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

.ota-ticket__stub {
  flex: 0 0 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 1.25rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 1.5rem 0;
  background: color-mix(in srgb, var(--teal) 7%, white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-align: center;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ota-ticket__stub:hover,
.ota-ticket__stub:focus-visible {
  background: color-mix(in srgb, var(--teal) 14%, white);
  color: var(--teal);
  transform: translateY(-2px);
}

.ota-ticket__stub:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Exclusive Partner — plain text + logo, no tinted wrapper (the logo's own
   white background fought the teal tint) */
.ota-ticket__partner {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.ota-ticket__partner-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.ota-ticket__partner img {
  display: block;
  max-width: 7.5rem;
  max-height: 2.5rem;
  object-fit: contain;
}

/* ── Ingredient field notes ───────────────────────────────────── */

.ota-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: var(--inset-start);
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vh, 7rem);
}

.ota-note {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.ota-note:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
}

.ota-note:nth-child(even) .ota-keepsake { order: 2; }
.ota-note:nth-child(even) .ota-note__copy { order: 1; text-align: right; }

.ota-keepsake {
  margin: 0;
  background: var(--paper);
  padding: 0.9rem 0.9rem 3.2rem;
  border-radius: 6px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 16%, transparent);
  /* JS assigns each polaroid its own slight tilt via --keepsake-tilt */
  rotate: var(--keepsake-tilt, -2deg);
  transition: rotate 0.45s ease, transform 0.45s ease;
}

.ota-note:nth-child(even) .ota-keepsake { rotate: var(--keepsake-tilt, 2.2deg); }

.ota-note:hover .ota-keepsake,
.ota-note:focus-within .ota-keepsake {
  rotate: 0deg;
  transform: translateY(-4px);
}

.ota-keepsake img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

/* Music-video keepsake — silent autoplay YouTube in the polaroid frame */
.ota-keepsake__frame {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: var(--dark);
}

.ota-keepsake__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ota-note__no {
  margin: 0 0 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.ota-note__no span { color: var(--muted); font-weight: 600; }

.ota-note__copy h3 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}

.ota-note__copy p:last-child {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 34rem;
  text-wrap: pretty;
}

.ota-note:nth-child(even) .ota-note__copy p:last-child { margin-left: auto; }

.ota-provenance {
  margin: clamp(3.5rem, 7vh, 5rem) 0 0;
  padding-left: var(--inset-start);
  max-width: 44rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted-ui);
}

/* ── Destinations — the departure board ───────────────────────────────
   Full-width board legs, not cards: giant route code + city, status as a
   board column, highlights as an open manifest, documentary photo plate. */

.ota-destinations {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ota-destination {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem);
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
  /* Leg sits clear of the corridor so the route stays visible past it. */
  margin-left: var(--inset-start);
  padding: clamp(2.25rem, 4.5vh, 3.25rem) 0 clamp(2.5rem, 5vh, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.ota-destination:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

/* Board code + city (injected by overseas-tour.js from waypoint data) */
.ota-destination__code {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.35rem;
  min-width: 6.5rem;
}

.ota-destination__iata {
  font-family: 'Futura', 'Jost', sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--teal-deep);
}

.ota-destination__city {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}

.ota-destination__photo {
  margin: 0;
  border-radius: 0.25rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 1rem 2.5rem rgba(28, 35, 33, 0.1);
}

.ota-destination__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* MCE card — KL Story film plays in place of the still on desktop;
   mobile / reduced-motion keep the poster photograph */
.ota-destination__video {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .ota-destination__photo--video img { display: none; }
  .ota-destination__photo--video .ota-destination__video { display: block; }
}

.ota-destination__photo figcaption {
  padding: 0.6rem 0.85rem 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--teal) 6%, white);
}

.ota-destination__body h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ota-destination__abbr {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* Status as a board column — teal accent when open, muted when pending */
.ota-destination__status {
  display: inline-block;
  margin: 0.35rem 0 1.1rem;
  padding: 0 0 0 0.75rem;
  border-left: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ota-destination__status--open {
  border-left-color: var(--teal);
  color: var(--teal-deep);
}

.ota-destination__body > p {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 40rem;
}

/* Highlights as an open manifest */
.ota-destination__list {
  margin: 0;
  padding-left: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  list-style: disc;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 44rem;
}

.ota-destination__list li::marker { color: var(--teal); }

/* ── Companions ───────────────────────────────────────────────── */

.ota-companions {
  margin-top: clamp(4rem, 8vh, 6rem);
  padding-left: var(--inset-start);
}

.ota-companions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 68rem;
}

.ota-companions__title {
  margin: 0.7rem 0 1.6rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.ota-companion {
  margin: 0;
  text-align: center;
}

.ota-companion__mat {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  padding: 1.35rem;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 0.25rem;
  box-shadow: 0 0.9rem 2.25rem rgba(28, 35, 33, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ota-companion:hover .ota-companion__mat {
  transform: translateY(-3px);
  box-shadow: 0 1.25rem 3rem rgba(28, 35, 33, 0.09);
}

.ota-companion__mat img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1));
  transition: transform 0.3s ease;
}

/* Per-logo ink-weight calibration (same system as the HKICF sponsor wall):
   each mark converges on the same perceived weight inside the uniform mats */
.ota-companion__mat img[src*="yca"] { --logo-scale: 1.35; }
.ota-companion__mat img[src*="choralspace"] { --logo-scale: 0.82; }
.ota-companion__mat img[src*="darius"] { --logo-scale: 1.15; }

.ota-companion--exclusive .ota-companion__mat {
  border-color: color-mix(in srgb, var(--teal) 45%, transparent);
}

.ota-companion figcaption {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Arrival — enquiry on the dark stage ──────────────────────── */

.ota-enquiry {
  position: relative;
  background: var(--dark);
  color: #fff;
  padding: clamp(6rem, 12vh, 9rem) 0 clamp(5rem, 10vh, 8rem);
  margin-top: clamp(2rem, 5vh, 4rem);
}

.ota-enquiry__curve {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 6rem;
  color: var(--ground);
  pointer-events: none;
}

.ota-enquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

.ota-enquiry__intro { position: sticky; top: 7rem; }

.ota-enquiry__kicker { color: var(--teal); }

.ota-enquiry__intro h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 4.5vw, 4.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ota-enquiry__intro > p {
  margin: 0 0 2.5rem;
  font-size: 1.06rem;
  line-height: 1.7;
  color: color-mix(in srgb, white 72%, transparent);
  max-width: 30rem;
}

.ota-enquiry__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.ota-enquiry__points li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ota-enquiry__points svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.ota-enquiry__points h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 500;
}

.ota-enquiry__points p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, white 60%, transparent);
}

.ota-enquiry__card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 2rem;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: 0 24px 70px color-mix(in srgb, black 45%, transparent);
}

.ot-transport-note {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--teal) 8%, white);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ot-transport-note p { margin: 0; }
.ot-transport-note a { color: var(--teal-deep); font-weight: 600; }

/* ── Motion states (JS sets .ota-in before tweening) ──────────── */

@media (prefers-reduced-motion: no-preference) {
  .ota-page .js-reveal {
    opacity: 0;
    transform: translateY(36px);
  }
  .ota-page .js-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ── Departure board collapses to one column ─────────────────────── */
@media (max-width: 900px) {
  .ota-destination { grid-template-columns: 1fr; gap: 1.5rem; }
  .ota-destination__code { flex-direction: row; align-items: baseline; gap: 0.9rem; min-width: 0; }
  .ota-destination__city { border-top: 0; padding-top: 0; }
}

/* ── Responsive choreography ──────────────────────────────────── */

@media (max-width: 1023px) {
  .ota-enquiry__grid { grid-template-columns: 1fr; }
  .ota-enquiry__intro { position: static; }
}

@media (max-width: 768px) {
  .ota-page { --route-x: 0.5rem; --shell-pad: 1.25rem; }

  .ota-chapter {
    --corridor: 2.25rem;
    --inset-start: 2.25rem;
  }

  .ota-shell { width: calc(100% - 2.5rem); }

  .ota-hero__content { padding-bottom: 8rem; }

  .ota-route__line { stroke-width: 2; stroke-dasharray: 0.1 10; }

  .ota-chapter__body,
  .ota-chapter__head,
  .ota-tickets,
  .ota-notes,
  .ota-companions,
  .ota-provenance {
    padding-left: 2.25rem;
    padding-right: 0;
  }

  .ota-destination { margin-left: 2.25rem; margin-right: 0; }

  .ota-waypoint { left: var(--route-x); right: auto; }
  .ota-waypoint__stamp { display: none; }
  .ota-waypoint--inline {
    left: -1.75rem;
    top: -1.05rem;
  }
  .ota-waypoint--inline .ota-waypoint__stamp {
    display: flex;
    position: relative;
    left: 26px;
    top: auto;
    bottom: auto;
    translate: none;
  }
  .ota-journey.tags-live .ota-waypoint--inline .ota-waypoint__stamp {
    opacity: 1;
    translate: none;
    rotate: -1.5deg;
  }

  .ota-tickets { grid-template-columns: 1fr; }

  .ota-ticket__row { flex-direction: column; }
  .ota-ticket__main {
    border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: 0;
  }
  .ota-ticket__stub {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-top: 0;
    border-radius: 0 0 1.5rem 1.5rem;
    padding: 0.85rem 1rem;
  }

  .ota-destination { grid-template-columns: 1fr; }
  .ota-destination__photo { order: 2; }

  .ota-note,
  .ota-note:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .ota-note:nth-child(even) .ota-keepsake { order: 0; }
  .ota-note:nth-child(even) .ota-note__copy { order: 1; text-align: left; }
  .ota-note:nth-child(even) .ota-note__copy p:last-child { margin-left: 0; }

  .ota-keepsake { rotate: -1.2deg; padding: 0.7rem 0.7rem 2.4rem; }

  .ota-companions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ota-enquiry { padding-top: 5.5rem; }
  .ota-enquiry__curve { height: 4rem; }
  .ota-hero__curve { height: 4rem; }
}
/* Shared truthful no-JavaScript fallback for all three prototypes. */
.no-js #ot-progress-track,
.no-js #ot-step-label,
.no-js #ot-next,
.no-js #ot-back,
.no-js [data-testid="form-submit"] { display:none!important; }
.no-js #ot-step-2[hidden] { display:block!important; }
.no-js #ot-step-1,
.no-js #ot-step-2 { margin-bottom:2rem; }