/* NAVA — the five stages after the hero. Mobile first. */

/* ── 1 · Chart ───────────────────────────────────────────────────────── */
.chart { background: var(--paper-2); }

.chart__concerns {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; gap: 8px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.chart__concerns::-webkit-scrollbar { display: none; }
.chart__concerns li { flex: none; scroll-snap-align: start; }
.chart__concerns button {
  min-height: 46px; padding: 0 18px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 999px;
  font: inherit; font-size: var(--step--1); white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.chart__concerns button:hover { border-color: var(--ink); color: var(--ink); }
.chart__concerns button[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper-2);
}

.panel { display: grid; gap: 24px; }
.panel[hidden] { display: none; }
.panel__img {
  position: relative;
  border-radius: 26px 26px 26px 4px;
  overflow: hidden;
  background: var(--paper-3);
}
.panel__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; }
.panel__text h3 { font-size: var(--step-2); margin-bottom: 14px; }
.panel__text > p { color: var(--ink-soft); max-width: 56ch; }

.tx { list-style: none; margin: 26px 0 0; padding: 0; }
.tx li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.tx li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.tx b { font-weight: 500; grid-column: 1; grid-row: 1; }
.tx em {
  grid-column: 2; grid-row: 1;
  font-style: normal; font-family: var(--display);
  font-variation-settings: "WONK" 1;
  font-size: var(--step-1); color: var(--gilt);
  white-space: nowrap; align-self: start; text-align: right;
}
.tx span { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
.tx span:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.tx span:nth-of-type(2) { grid-column: 2; grid-row: 2; text-align: right; }

.chart__foot { margin-inline: 0 auto;
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: .84rem; color: var(--ink-soft); max-width: 72ch;
}

/* ── 2 · The Room ────────────────────────────────────────────────────── */
.room__wide { background: none; }
.room__wide img { border-radius: 26px; background: var(--paper-3); }
.room__wide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.room__wide figcaption,
.passage__img figcaption,
.return__city figcaption {
  margin-top: 12px; font-size: .8rem; color: var(--ink-soft); max-width: 60ch;
}

.room__doctors {
  display: grid; gap: 34px;
  margin-top: clamp(40px, 7vw, 76px);
}
.doc__img {
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 22px 22px 4px 22px;
  background: var(--paper-3);
  margin-bottom: 18px;
}
/* The three stock portraits are shot at different distances. The frame is
   fixed and each image is pushed to a matching head-and-shoulders crop. */
.doc__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  transform-origin: 50% 12%;
}
.doc:nth-child(2) .doc__img img { transform: scale(1.6); transform-origin: 50% 4%; }
.doc:nth-child(3) .doc__img img { transform: scale(1.18); transform-origin: 50% 6%; }
.doc h3 { font-size: var(--step-1); }
.doc__role { color: var(--gilt); font-size: .82rem; margin: 6px 0 12px; }
.doc p { color: var(--ink-soft); font-size: .92rem; }
.doc__reg {
  margin-top: 12px; font-size: .76rem;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.room__standards {
  list-style: none; margin: clamp(40px, 7vw, 76px) auto 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.room__standards li {
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink-soft); font-size: .95rem;
}
.room__standards b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }

/* ── 3 · Passage ─────────────────────────────────────────────────────── */
.passage { background: var(--ink); color: var(--paper-2); }
.passage .head__sub { color: color-mix(in srgb, var(--paper-2) 62%, transparent); }
.passage .head__stop, .passage .head__stop::before { color: var(--gilt-lit); background-color: currentColor; }
.passage .head__stop { background: none; color: var(--gilt-lit); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; counter-reset: leg; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px;
  width: 1px; background: color-mix(in srgb, var(--paper-2) 22%, transparent);
}
/* The day draws itself downward as you read it. */
.timeline::after {
  content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px;
  width: 1px; background: var(--gilt-lit);
  transform-origin: 50% 0; transform: scaleY(var(--drawn, 0));
  transition: transform .35s linear;
}
@media (prefers-reduced-motion: reduce) {
  .timeline::after { transform: scaleY(1); }
  .rail__progress { transition: none; }
}
.timeline li { position: relative; padding-bottom: 34px; }
.timeline li::before {
  content: ""; position: absolute; left: -26px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--gilt-lit);
}
.timeline__time {
  display: block; font-family: var(--display);
  font-variation-settings: "WONK" 1;
  font-size: var(--step-1); color: var(--gilt-lit);
  margin-bottom: 4px;
}
.timeline h3 { font-size: var(--step-1); margin-bottom: 8px; }
.timeline p { color: color-mix(in srgb, var(--paper-2) 62%, transparent); font-size: .95rem; max-width: 58ch; }

.passage__img { margin-top: clamp(32px, 6vw, 60px); }
.passage__img img { border-radius: 26px; }
.passage__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.passage__img figcaption { color: color-mix(in srgb, var(--paper-2) 55%, transparent); }

/* ── 4 · Return ──────────────────────────────────────────────────────── */
.return__grid { display: grid; gap: 30px; }
.return__img { border-radius: 26px 4px 26px 26px; overflow: hidden; background: var(--paper-3); }
.return__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  padding: 18px 0 18px 28px; position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink-soft); font-size: .95rem;
}
.checks li:first-child { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 27px;
  width: 14px; height: 1px; background: var(--gilt);
}
.checks b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 3px; }

.return__stay { margin-top: 38px; }
.return__stay h3 { font-size: var(--step-1); margin-bottom: 10px; }
.return__stay > p { color: var(--ink-soft); font-size: .95rem; max-width: 54ch; }
.stay { list-style: none; margin: 20px 0 0; padding: 0; }
.stay li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: .9rem;
}
.stay b { font-weight: 500; }
.stay span { color: var(--ink-soft); }

.return__city { margin-top: clamp(40px, 7vw, 78px); }
.return__city img { border-radius: 26px; }
.return__city img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ── 5 · Berth ───────────────────────────────────────────────────────── */
.berth { background: var(--paper-2); }
.berth__grid { display: grid; gap: 40px; }

.field { display: block; margin-bottom: 20px; }
.field label {
  display: block; font-size: .8rem; letter-spacing: .03em;
  color: var(--ink-soft); margin-bottom: 7px;
}
.field input, .field select {
  width: 100%; min-height: 50px; padding: 0 15px;
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 12px;
  transition: border-color .2s ease, background-color .2s ease;
}
.field select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input:hover, .field select:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.field input:focus, .field select:focus { border-color: var(--gilt); background: var(--paper-2); }
.hint { display: block; margin-top: 6px; font-size: .76rem; color: color-mix(in srgb, var(--ink) 48%, transparent); }
.form__note { margin-top: 16px; font-size: .82rem; color: var(--ink-soft); max-width: 46ch; }

.berth__img { border-radius: 26px; overflow: hidden; background: var(--paper-3); }
.berth__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.details { margin: 28px 0 0; }
.details div {
  padding: 15px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.details div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.details dt {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gilt); margin-bottom: 6px;
}
.details dd { margin: 0; font-size: .92rem; line-height: 1.55; }
.details a { color: inherit; }

/* ── Reveal on entry (one gentle move, not per card) ─────────────────── */
.stop .head, .panel, .room__wide, .doc, .timeline li,
.return__grid, .return__city, .berth__grid, .room__standards {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.is-in { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .stop .head, .panel, .room__wide, .doc, .timeline li,
  .return__grid, .return__city, .berth__grid, .room__standards {
    opacity: 1; transform: none; transition: none;
  }
}

/* ── Wider screens ───────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .panel { grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
  .panel__img img { aspect-ratio: 3 / 4; }
  .room__doctors { grid-template-columns: repeat(3, 1fr); }
  .return__grid { grid-template-columns: 5fr 7fr; gap: 46px; align-items: start; }
  .berth__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .room__standards { grid-template-columns: 1fr 1fr; column-gap: 44px; }
  .room__standards li:nth-child(-n+2) { border-top: 0; }
  .timeline { padding-left: 0; }
  .timeline li {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 36px; row-gap: 8px;
    padding-left: 26px;
  }
  .timeline__time { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .timeline h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .timeline p { grid-column: 2; grid-row: 2; }
}

@media (min-width: 1024px) {
  .chart__concerns { flex-wrap: wrap; overflow: visible; }
  .chart__grid { display: grid; grid-template-columns: 1fr; }
  .head__h { font-size: var(--step-3); }
}

/* ── Desktop balance: image columns fill the row their text sets ─────── */
@media (min-width: 700px) {
  .panel { align-items: stretch; }
  .panel__img { align-self: stretch; }
  .panel__img img { height: 100%; aspect-ratio: auto; object-position: 50% 30%; }
  .return__grid { align-items: stretch; }
  .return__img { align-self: stretch; }
  .return__img img { height: 100%; aspect-ratio: auto; }
}