/* ==========================================================================
   STEWARD TRAVEL — Travel Well. Steward Generously.
   --------------------------------------------------------------------------
   The site is built around one idea: the commission was always in the price,
   and this business points it somewhere else. So the layout keeps returning
   to a redirect — a line that arrives, turns, and lands somewhere better.

   CSS ORDER — do not reorder, specificity depends on it:
     1. Tokens          6. Buttons
     2. Reset           7. Nav
     3. Layout bands    8. Components
     4. Type            9. Footer
     5. Rules/plates   10. Motion + responsive
   Section spacing lives ONLY on .band. Never add padding to a component that
   also sits inside a band — that is how selectors start fighting.
   ========================================================================== */

/* 1. TOKENS ============================================================== */

:root {
  /* Brand, exactly as specified */
  --slate: #2c3e6b;
  --terra: #c17a47;
  --gold: #c9a87c;
  --sand: #e8dcc8;
  --gray: #5a6070;

  /* Derived. Two of the five brand colours cannot carry text on a light
     ground — Terra lands at 2.52:1 on Sand and Gold at 1.65:1. Rather than
     drop them or ship failing text, each has an ink variant with the hue and
     saturation held and only lightness moved until it clears 4.5:1. The
     brand colour stays the brand colour wherever it is decorative. */
  --slate-deep: #1e2b4a;
  --slate-lift: #31406b;  /* gradient's lightest stop; gold labels need 4.5 here */
  --terra-ink: #8b552f;   /* Terra as text on light ground  — 4.51 */
  --terra-btn: #a86739;   /* Terra as button ground, white label — 4.50 */
  --gold-ink: #7b5c33;    /* Gold as text on light ground   — 4.53 */
  --terra-chip: #85512d;  /* Terra on a terra wash inside .note — 4.51 */

  /* Grounds */
  --paper: #f6f1e7;
  --sand-deep: #dccdb4;

  /* Text */
  --on-dark: #f4efe6;
  --on-dark-mute: #b8c1d2;
  --on-light: #23283a;
  --on-light-mute: #5a6070;

  /* Ground tokens. Every surface re-declares these three and components read
     them instead of naming a colour, so a component lands on the right side
     of the contrast line wherever it is placed and no `.band--slate .thing`
     override is ever needed. */
  --text: var(--on-light);
  --text-mute: var(--on-light-mute);
  --metal: var(--gold-ink);
  --accent: var(--terra-ink);

  /* Type */
  --display: "Cormorant Garamond", "Apple Garamond", Garamond, Georgia, serif;
  --body: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Scale — 1.25 major third */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: 1.1875rem;
  --t-lg: 1.5rem;
  --t-xl: 2rem;
  --t-2xl: 2.75rem;
  --t-3xl: 3.75rem;

  /* Space */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;

  --shell: 1160px;
  --shell-narrow: 720px;

  /* Height of the Travel Planning head. It is an ordinary section — the page
     is never pinned — so this is just how tall the heading band is. */
  --flyin-height: 62vh;

  /* Scroll length of the journey-map track. Lower it to shorten that
     section; the route still completes, just faster. */
  --jm-track: 240vh;

  /* Motion — weight, not bounce */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.2, 0.9, 0.25, 1.06);

  --lift-1: 0 1px 2px rgba(20, 28, 48, 0.16);
  --lift-2: 0 8px 22px -8px rgba(20, 28, 48, 0.28);
  --lift-3: 0 20px 48px -16px rgba(20, 28, 48, 0.36);

  --rule: 1px solid rgba(122, 100, 70, 0.24);
  --rule-dark: 1px solid rgba(201, 168, 124, 0.26);
}

/* 2. RESET =============================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-light);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-2) var(--s-3);
  background: var(--terra-btn);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: var(--s-2);
}

/* 3. LAYOUT BANDS ======================================================== */

.band {
  position: relative;
  padding: var(--s-7) var(--s-3);
}

.band--tight {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}

/* --- Light grounds --- */
.band--paper,
.band--sand,
.card,
.tier,
.faq {
  --text: var(--on-light);
  --text-mute: var(--on-light-mute);
  --metal: var(--gold-ink);
  --accent: var(--terra-ink);
  color: var(--text);
}

.band--paper {
  background: var(--paper);
}

.band--sand {
  background: var(--sand);
}

/* --- Dark grounds --- */
.band--slate,
.band--deep,
.hero,
.pagehead,
.flyin,
.foot,
.nav {
  --text: var(--on-dark);
  --text-mute: var(--on-dark-mute);
  --metal: var(--gold);
  --accent: var(--gold);
  color: var(--text);
}

.band--slate {
  background: var(--slate);
}

.band--deep {
  background: var(--slate-deep);
}

/* Very quiet ground texture — paper tooth on light, weave on dark */
.band--paper::before,
.band--sand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle at 20% 30%, rgba(90, 96, 112, 0.04) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(90, 96, 112, 0.03) 0 1px, transparent 1px);
  background-size: 13px 13px, 19px 19px;
}

.band--slate::before,
.band--deep::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.016) 0 2px, transparent 2px 5px);
}

.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}

.shell--narrow {
  max-width: var(--shell-narrow);
}

.grid {
  display: grid;
  gap: var(--s-4);
}

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

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--split {
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-6);
  align-items: center;
}

/* 4. TYPE ================================================================ */

.display-1,
.display-2,
.display-3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.008em;
  margin: 0;
  text-wrap: balance;
}

.display-1 {
  font-size: clamp(2.5rem, 6vw, var(--t-3xl));
}

.display-2 {
  font-size: clamp(2rem, 4.4vw, var(--t-2xl));
}

.display-3 {
  font-size: clamp(1.45rem, 2.8vw, var(--t-xl));
  line-height: 1.2;
}

/* Section label with a rule drawn to its right. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metal);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.eyebrow--center {
  justify-content: center;
}

.eyebrow--center::after {
  display: none;
}

.lede {
  margin: var(--s-3) 0 0;
  font-size: clamp(var(--t-md), 2vw, var(--t-lg));
  line-height: 1.55;
  color: var(--text-mute);
  max-width: 62ch;
}

/* Spacing lives on the elements themselves rather than on a `* + *` flow
   rule: `.prose p` outranks `.prose > * + *` on specificity, so a margin
   reset there silently wins and every paragraph closes up. */
.prose p {
  margin: 0 0 var(--s-3);
  max-width: 68ch;
}

.prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.008em;
  margin: var(--s-6) 0 var(--s-3);
  color: var(--text);
  text-wrap: balance;
}

.prose h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: var(--s-5) 0 var(--s-2);
  color: var(--text);
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose strong {
  font-weight: 700;
  color: var(--text);
}

.prose ul {
  margin: 0 0 var(--s-3);
  padding-left: 1.15rem;
  max-width: 66ch;
}

.prose li + li {
  margin-top: var(--s-1);
}

.prose li::marker {
  color: var(--metal);
}

.prose a:not(.btn) {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}

.prose a:not(.btn):hover {
  text-decoration-color: currentColor;
}

/* The line that turns. Used wherever the copy states the redirect. */
.turn {
  position: relative;
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  border-left: 3px solid var(--terra);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: var(--text);
}

.turn p {
  margin: 0;
  max-width: none;
}

.turn p + p {
  margin-top: var(--s-2);
}

/* 5. RULES + PLATES ====================================================== */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--slate-deep);
  border: var(--rule-dark);
}

.plate svg {
  width: 100%;
  height: auto;
}

.plate__cap {
  margin: var(--s-2) 0 0;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* 6. BUTTONS ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 0.8rem var(--s-4);
  border: 1px solid transparent;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.btn--primary {
  background: var(--terra-btn);
  color: #fff;
  box-shadow: var(--lift-1);
}

.btn--primary:hover {
  background: #96592f;
  box-shadow: var(--lift-2);
}

.btn--ghost {
  border-color: currentColor;
  color: var(--text);
  background: transparent;
}

.btn--ghost:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.btn-row--center {
  justify-content: center;
}

/* Text link with an arrow that steps forward on hover. */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--accent);
}

.arrow::after {
  content: "\2192";
  transition: transform 0.2s var(--ease-out);
}

.arrow:hover::after {
  transform: translateX(4px);
}

/* 7. NAV ================================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--slate-deep);
  border-bottom: var(--rule-dark);
  transition: box-shadow 0.25s var(--ease-out);
}

.nav.is-condensed {
  box-shadow: var(--lift-2);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.7rem var(--s-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  padding-block: 0.25rem;
}

/* 44px rather than 40 — the mark carries full coastlines here, matching the
   favicon, and the extra few pixels are what keep them reading as continents
   instead of texture. */
.brand__mark {
  width: 44px;
  height: 44px;
  flex: none;
}

.brand__name {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--on-dark);
}

.brand__tag {
  display: block;
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-dark);
  position: relative;
}

.nav__link:hover {
  color: var(--gold);
}

/* `.is-section` is set on the parent when the current page sits under it but
   is not itself in the menu (Ocean and River Cruises live under Cruise
   Travel). It gets the same styling but deliberately NOT aria-current, since
   it is not the page — the rule is dimmed to read as "you are in here"
   rather than "you are here". */
.nav__link[aria-current="page"],
.nav__link.is-section {
  color: var(--gold);
}

.nav__link[aria-current="page"]::before,
.nav__link.is-section::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 6px;
  height: 2px;
  background: var(--terra);
}

.nav__link.is-section::before {
  opacity: 0.5;
}

/* Dropdown. Opens on hover for pointers and on click for everyone — the
   button is real, so keyboard and touch get the same behaviour. */
.nav__item {
  position: relative;
}

.nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  background: var(--slate-deep);
  border: var(--rule-dark);
  box-shadow: var(--lift-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
}

.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav__sub.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__sub a {
  display: block;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--on-dark);
}

.nav__sub a:hover {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  cursor: pointer;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: relative;
}

.nav__toggle span::before {
  top: -5px;
}

.nav__toggle span::after {
  top: 3.5px;
}

/* 8. COMPONENTS ========================================================== */

/* --- Hero --- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: calc(100svh - 62px);
  padding: var(--s-6) var(--s-3) var(--s-7);
  background: radial-gradient(120% 90% at 50% 0%, var(--slate-lift) 0%, var(--slate) 45%, var(--slate-deep) 100%);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell-narrow);
  margin: auto;
  text-align: center;
}

.hero__globe {
  width: clamp(190px, 27vw, 300px);
  margin: 0 auto var(--s-5);
}

.hero__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

.hero__title em {
  font-style: italic;
  color: var(--gold);
}

.hero__lede {
  margin: var(--s-3) auto 0;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--on-dark-mute);
}

.hero__sig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__sig::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

/* --- Page head (interior) --- */
.pagehead {
  position: relative;
  padding: var(--s-6) var(--s-3) var(--s-5);
  background: radial-gradient(120% 120% at 50% 0%, var(--slate-lift) 0%, var(--slate) 55%, var(--slate-deep) 100%);
  overflow: hidden;
}

.pagehead__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shell-narrow);
  margin-inline: auto;
  text-align: center;
}

/* The same turning mark as the home hero, at interior-page scale. It shares
   the `.mark` class, so the float, the entrance and the 48s rotation all come
   from the one set of rules. */
.pagehead__mark {
  width: clamp(88px, 11vw, 124px);
  margin: 0 auto var(--s-3);
}

/* The globe is square; the family is 440x264. Matched on HEIGHT rather than
   width, so it reads at the same weight in the head instead of as a short
   wide strip — 206px wide lands at 124px tall, the globe's own maximum. */
.pagehead__mark--family {
  width: clamp(147px, 18.3vw, 206px);
}

/* Traced artwork, cropped to its own bounds (aspect 0.944). Matched on
   height like the family mark, so all three page-head symbols carry the same
   visual weight: 117px wide lands at 124px tall. */
.pagehead__mark--gift {
  width: clamp(83px, 10.4vw, 117px);
}

/* Traced artwork, aspect 1.088 — 135px wide lands at 124px tall. */
.pagehead__mark--map {
  width: clamp(96px, 12vw, 135px);
}

/* Traced artwork, aspect 0.654 — the tallest of the marks, so it is the
   narrowest: 81px wide lands at the same 124px tall. */
.pagehead__mark--cross {
  width: clamp(58px, 7.2vw, 81px);
}

/* Traced artwork, aspect 0.837 — 104px wide lands at 124px tall. */
.pagehead__mark--church {
  width: clamp(74px, 9.2vw, 104px);
}

/* The beach mark needs no modifier: its traced bounds are square (293x293),
   so the base .pagehead__mark width already lands it at the same 124px tall.
   It carries no `.mark` class, so it stays still like the other traced marks. */

.pagehead .eyebrow {
  justify-content: center;
}

.pagehead .eyebrow::after {
  display: none;
}

.pagehead .lede {
  margin-inline: auto;
}

/* --- Scroll fly-in -----------------------------------------------------
   An ordinary page head that happens to have an aircraft crossing it. The
   page scrolls normally the whole time — nothing is pinned, so the reader is
   never held in place waiting for an animation to finish. The aircraft's
   position is a function of how far this section has scrolled, so it moves
   with the reader rather than instead of them. */

.flyin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--flyin-height);
  padding: var(--s-6) var(--s-3);
  overflow: hidden;
  background: radial-gradient(120% 110% at 50% 15%, var(--slate-lift) 0%, var(--slate) 55%, var(--slate-deep) 100%);
}

.flyin__text {
  position: relative;
  z-index: 10;
  max-width: var(--shell-narrow);
  margin-bottom: var(--s-5);
  text-align: center;
}

/* A dedicated lane below the text, so the two can never share a pixel of
   vertical space no matter how many lines the heading wraps to on a phone.
   The aircraft translates well past both viewport edges, so `.flyin` must
   keep `overflow: hidden` — without it those off-screen positions widen the
   document and the whole page scrolls sideways. */
.flyin__lane {
  position: relative;
  width: 100%;
  height: clamp(112px, 16vw, 216px);
}

.flyin__craft {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
}

.flyin__craft svg {
  width: clamp(230px, 34vw, 460px);
  height: auto;
  flex: none;
}

/* Without JS there is no flight, so the lane collapses and the aircraft is
   simply not drawn — the heading still reads and no space is wasted holding
   a gap open for an animation that will never run. */
.flyin:not(.is-live) .flyin__lane {
  display: none;
}

/* --- Journey map --------------------------------------------------------
   The specialties as a route rather than a grid of cards.

   The DEFAULT state below is the fallback: a drawn route with the cards in an
   ordinary grid underneath. That is what renders with JS off or under reduced
   motion. `.is-live`, added by the script, is what turns on the pinned,
   scrubbed version — so the readable version is never dependent on the
   animation arriving. */

.jm {
  position: relative;
  --text: var(--on-dark);
  --text-mute: var(--on-dark-mute);
  --metal: var(--gold);
  --accent: var(--gold);
  color: var(--text);
  background: radial-gradient(120% 90% at 50% 6%, var(--slate-lift) 0%, var(--slate) 52%, var(--slate-deep) 100%);
}

.jm__screen {
  padding: var(--s-7) var(--s-3);
}

.jm__head {
  max-width: var(--shell-narrow);
  margin: 0 auto var(--s-5);
  text-align: center;
}

.jm__stage {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  transform-origin: 50% 55%;
}

.jm__map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.jm__grid line { stroke: rgba(201, 168, 124, 0.09); stroke-width: 1; }
.jm__land   { fill: rgba(255, 255, 255, 0.035); }
.jm__land--2 { fill: rgba(255, 255, 255, 0.022); }

.jm__route-base {
  fill: none;
  stroke: rgba(201, 168, 124, 0.22);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
}

/* DrawSVG is a paid GSAP plugin; this is the dash-offset technique instead. */
.jm__route {
  fill: none;
  stroke: var(--terra);
  stroke-width: 4;
  stroke-linecap: round;
}

.jm__pin-halo { fill: var(--terra); opacity: 0.18; }
.jm__pin-dot  { fill: var(--sand); stroke: var(--terra); stroke-width: 3; }

.jm__pin-num {
  fill: var(--slate-deep);
  font-family: var(--body);
  font-weight: 900;
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: central;
}

.jm__craft-body { fill: var(--gold); stroke: var(--slate-deep); stroke-width: 1.5; stroke-linejoin: round; }
.jm__craft-ring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0.35; }

/* The craft only means anything while the route is being travelled. */
.jm:not(.is-live) .jm__craft { display: none; }

.jm__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.jm__card {
  padding: var(--s-3);
  background: var(--sand);
  color: var(--on-light);
  border-left: 3px solid var(--terra);
  box-shadow: var(--lift-2);
}

.jm__card-n {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--terra-ink);
}

.jm__card-h {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.15;
}

.jm__card-p {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--on-light-mute);
}

.jm__card .arrow { color: var(--terra-ink); }

/* --- Live: pinned and scrubbed ----------------------------------------- */

.jm.is-live {
  height: var(--jm-track);
}

.jm.is-live .jm__screen {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  padding: var(--s-5) var(--s-3);
  overflow: hidden;
}

.jm.is-live .jm__head { flex: none; margin-bottom: var(--s-3); }

.jm.is-live .jm__stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  will-change: transform;
}

.jm.is-live .jm__map {
  position: absolute;
  inset: 0;
  height: 100%;
}

.jm.is-live .jm__cards {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
}

/* Positioned onto its own marker. The custom properties are set in JS so a
   media query can relocate the card without fighting an inline style. */
.jm.is-live .jm__card {
  position: absolute;
  left: var(--jm-x);
  top: var(--jm-y);
  width: min(255px, 33vw);
  padding: 0.85rem 0.95rem;
  border-radius: 3px;
  pointer-events: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-soft);
}

.jm.is-live .jm__card.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.jm.is-live .jm__card-p { font-size: 0.8rem; margin-bottom: 0.5rem; }

.jm.is-live .jm__pin,
.jm.is-live .jm__craft { opacity: 0; transition: opacity 0.3s var(--ease-out); }

.jm.is-live .jm__pin.is-on,
.jm.is-live .jm__craft.is-on { opacity: 1; }

/* Narrow screens: the map keeps the upper half and the cards share one slot
   in the band beneath it, one at a time. A 1200x620 map in a narrow column
   letterboxes to a strip with dead bands, and cards pinned to their markers
   run off both edges — this is a different layout, not the desktop one
   squeezed. */
@media (max-width: 860px) {
  .jm.is-live .jm__stage { flex: none; height: 52svh; }

  /* The card slot is the band under the map, not the map itself: a 1200x620
     map in a narrow column letterboxes to a strip, and a card centred on its
     marker would sit on top of the route. */
  .jm.is-live .jm__cards { inset: auto 0 0 0; height: 42%; }

  .jm.is-live .jm__card {
    left: 50%;
    top: auto;
    bottom: 0;
    width: min(340px, 88vw);
    transform: translate(-50%, 0) scale(0.9);
  }

  .jm.is-live .jm__card.is-on { transform: translate(-50%, 0) scale(1); }
}

/* --- Cards --- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  background: var(--paper);
  border: var(--rule);
  border-top: 3px solid var(--terra);
  box-shadow: var(--lift-1);
  transition: transform 0.28s var(--ease-soft), box-shadow 0.28s var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
}

.card__h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 var(--s-2);
  color: var(--text);
}

.card p {
  margin: 0 0 var(--s-3);
  color: var(--text-mute);
  font-size: var(--t-base);
}

.card .arrow {
  margin-top: auto;
}

.card--plain {
  border-top-color: var(--gold);
}

/* --- Numbered steps. Numbered because the order is real. --- */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.step {
  position: relative;
  padding-left: 4.6rem;
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--metal);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--metal);
}

.step__h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 var(--s-1);
  color: var(--text);
}

.step p {
  margin: 0;
  color: var(--text-mute);
}

/* --- Gratitude tier table --- */
.tier {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-4);
  background: var(--paper);
  border: var(--rule);
  font-variant-numeric: tabular-nums;
}

.tier caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-mute);
}

.tier th,
.tier td {
  padding: 0.85rem var(--s-3);
  text-align: left;
  border-bottom: var(--rule);
}

.tier thead th {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.tier tbody tr:last-child th,
.tier tbody tr:last-child td {
  border-bottom: 0;
}

.tier td:last-child {
  font-weight: 700;
  color: var(--terra-ink);
}

/* --- FAQ --- */
.faq {
  border-top: var(--rule);
}

.faq__item {
  border-bottom: var(--rule);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
}

.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--body);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--metal);
  transition: transform 0.24s var(--ease-out);
}

.faq__item.is-open .faq__q::after {
  transform: rotate(45deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p,
.faq__a ul {
  margin: 0 0 var(--s-3);
  max-width: 68ch;
  color: var(--text-mute);
}

.faq__group {
  margin: var(--s-6) 0 var(--s-2);
}

/* --- Lead magnet --- */
.magnet {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--slate-deep);
  border-left: 4px solid var(--terra);
  color: var(--on-dark);
}

.magnet__h {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

.magnet p {
  margin: 0;
  color: var(--on-dark-mute);
  font-size: var(--t-sm);
}

.magnet__icon {
  width: 46px;
  height: 46px;
  color: var(--gold);
  flex: none;
}

/* --- Contact --- */
.contact-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: var(--rule);
}

.contact-line dt {
  flex: none;
  width: 5.5rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal);
}

.contact-line dd {
  margin: 0;
  font-size: var(--t-md);
}

.contact-line a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.embed {
  width: 100%;
  border: 0;
  background: var(--paper);
}

/* --- Notes / testimonial --- */
.note {
  padding: var(--s-4);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-left: 3px solid var(--gold);
}

.note p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.35;
}

.note cite {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--body);
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.placeholder {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 0.15rem 0.5rem;
  background: color-mix(in srgb, var(--terra) 18%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-chip);
}

/* Certification badge and the supplier wall under it. Every third-party mark
   is served from /assets/partners/ — nothing here is hotlinked to a supplier's
   own server, so the strip cannot break when they reorganise their CDN. */
.credential {
  margin: var(--s-5) 0 0;
  text-align: center;
}

.credential__badge {
  display: block;
  width: clamp(112px, 14vw, 150px);
  height: auto;
  margin-inline: auto;
}

.credential__note {
  margin: var(--s-2) auto 0;
  max-width: 56ch;
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-mute);
}

/* Outranks `.prose p`, which would otherwise reset the eyebrow's size and
   margins — same specificity trap the comment above `.prose p` describes. */
.prose .suppliers__label {
  margin: var(--s-6) 0 var(--s-4);
  max-width: none;
}

/* Breaks the wall out of the 720px reading column. Six wordmarks will not sit
   on one line inside it, and wrapping 3/2/1 strands Uniworld on a row of its
   own. The translate lives here rather than on the [data-reveal] list, because
   that animates `transform` and would wipe the centring. */
.suppliers-wall {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--shell), calc(100vw - 4rem));
}

/* Prefixed with .prose to clear `.prose ul`, which otherwise caps this at
   66ch and re-adds the bullet indent. */
.prose .suppliers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) var(--s-5);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}

.prose .suppliers li {
  margin: 0;
  display: flex;
}

/* Fitted to a box rather than to one axis. These wordmarks run from 6:1
   (Scenic) to 3:2 (Viking): capping height alone lets the long thin ones run
   to full natural width, capping width alone shrinks the stacked ones to
   nothing. Whichever limit binds first wins, which is what evens the row.

   A bare px max-width, not `min(150px, 100%)`: a percentage there is indefinite
   during intrinsic sizing, so the flex item kept sizing to Scenic's full 293px
   natural width and pushed the row to wrap. */
.suppliers img {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 52px;
  opacity: 0.9;
}

/* Viking and Emerald carry a stacked lockup, so they read small at a shared
   cap height — a little extra room evens the row out optically. */
.suppliers img[data-tall] {
  max-height: 66px;
}

/* 9. FOOTER ============================================================== */

.foot {
  background: var(--slate-deep);
  padding: var(--s-6) var(--s-3) var(--s-4);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-5);
  max-width: var(--shell);
  margin-inline: auto;
}

.foot__h {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--on-dark-mute);
}

.foot__list a:hover {
  color: var(--gold);
}

.foot__legal {
  max-width: var(--shell);
  margin: var(--s-5) auto 0;
  padding-top: var(--s-3);
  border-top: var(--rule-dark);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--on-dark-mute);
}

.foot__legal a {
  color: var(--on-dark-mute);
  text-underline-offset: 3px;
}

.foot__legal a:hover {
  color: var(--gold);
}

/* 10. MOTION ============================================================= */

/* Not one uniform fade-up applied to everything. Each kind of element
   arrives the way its counterpart would: a label settles its tracking, a
   printed line is laid down from the top, a card is set on the table.
   Travel is short throughout — the page should read as composed on arrival,
   not assembled in front of the reader. */

[data-reveal] {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.eyebrow[data-reveal] {
  transform: none;
  letter-spacing: 0.32em;
  transition: opacity 0.45s var(--ease-out), letter-spacing 0.75s var(--ease-out);
}

.eyebrow[data-reveal].is-in {
  letter-spacing: 0.2em;
}

.lede[data-reveal] {
  transform: none;
  clip-path: inset(0 0 102% 0);
  transition: opacity 0.4s var(--ease-out), clip-path 0.85s var(--ease-out);
}

.lede[data-reveal].is-in {
  clip-path: inset(0 0 -2% 0);
}

.card[data-reveal],
.note[data-reveal],
.turn[data-reveal] {
  transform: translateY(14px) scale(0.992);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-soft);
}

.steps[data-reveal] .step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-out);
}

.steps[data-reveal].is-in .step {
  opacity: 1;
  transform: none;
}

.steps[data-reveal].is-in .step:nth-child(2) { transition-delay: 0.09s; }
.steps[data-reveal].is-in .step:nth-child(3) { transition-delay: 0.18s; }
.steps[data-reveal].is-in .step:nth-child(4) { transition-delay: 0.27s; }

/* The mark is the client's own logo, so the artwork is never distorted.
   Motion is a staged entrance, a slow float, and the globe's rotation. */
.mark__float,
.mark__globe,
.mark__swoosh,
.mark__hands {
  transform-box: fill-box;
  transform-origin: center;
}

.mark__float {
  animation: mark-float 7s ease-in-out infinite;
}

.mark__land {
  animation: mark-spin 48s linear infinite;
}

@keyframes mark-spin {
  from { transform: translateX(0); }
  to { transform: translateX(-200.8px); }
}

@keyframes mark-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.mark__hands {
  animation: mark-rise 1s var(--ease-out) both;
}

.mark__globe {
  animation: mark-in 1.1s var(--ease-out) 0.15s both;
}

.mark__swoosh {
  animation: mark-sweep 1.2s var(--ease-out) 0.3s both;
}

@keyframes mark-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes mark-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes mark-sweep {
  from { opacity: 0; transform: rotate(-16deg); }
  to { opacity: 1; transform: none; }
}

/* 11. RESPONSIVE ========================================================= */

@media (max-width: 1000px) {
  .foot__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  :root {
    --s-7: 4.5rem;
    --s-6: 3rem;
  }

  .nav__toggle {
    display: block;
  }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - 62px);
    overflow-y: auto;
    padding: var(--s-2);
    background: var(--slate-deep);
    border-bottom: var(--rule-dark);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease-soft), opacity 0.22s var(--ease-out);
  }

  .nav__links.is-open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__link {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(201, 168, 124, 0.14);
  }

  .nav__link[aria-current="page"]::before,
  .nav__link.is-section::before {
    left: auto;
    right: 8px;
    bottom: auto;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translateY(-50%);
  }

  /* On a phone the dropdown stops being a dropdown — it is simply an
     indented part of the list, always open. Hover menus have no meaning
     on touch and hiding real navigation behind a second tap costs more
     than the tidiness is worth. */
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 var(--s-1) var(--s-3);
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav__sub a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.3rem 0.5rem;
    color: var(--on-dark-mute);
  }

  .grid--2,
  .grid--3,
  .grid--split {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
  }

  .magnet {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media (max-width: 560px) {
  :root {
    --s-7: 3.5rem;
  }

  .band {
    padding-left: var(--s-2);
    padding-right: var(--s-2);
  }

  /* Smaller marks and a tighter gutter so the supplier wall wraps to an even
     two-up. At full size the widest marks only fit one per row on a phone,
     which strands four of the six on lines of their own. */
  .suppliers img {
    max-width: 120px;
    max-height: 44px;
  }

  .suppliers img[data-tall] {
    max-height: 56px;
  }

  .prose .suppliers {
    gap: var(--s-3) var(--s-4);
  }

  /* On a phone the hero stops being a centred poster and becomes a title
     page — ranged left. Centred is fine for two lines of headline and poor
     for five lines of body: every line start lands somewhere new and the
     eye has to hunt for it. This is the one place the phone layout
     deliberately disagrees with the desktop one rather than reflowing it. */
  .hero__grid,
  .hero__title,
  .hero__lede,
  .hero__sig,
  .pagehead__inner {
    text-align: left;
  }

  .hero__sig {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .hero__sig::before {
    margin-top: 0.62em;
  }

  .pagehead .eyebrow {
    justify-content: flex-start;
  }

  .pagehead .lede {
    margin-inline: 0;
  }

  .foot__grid {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .step {
    padding-left: 3.6rem;
  }

  .step::before {
    width: 38px;
    height: 38px;
  }

  .magnet {
    padding: var(--s-3);
  }

  /* Standalone controls come up to the 44px touch minimum. Links inside a
     sentence are deliberately left alone: WCAG 2.5.8 exempts targets in a
     block of text, and padding them out would wreck the paragraph's
     line spacing for everyone. */
  .arrow {
    min-height: 44px;
  }

  .contact-line dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* A tier table cannot usefully shrink, so it scrolls in its own box
     rather than forcing the page sideways. */
  .tier-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tier {
    min-width: 420px;
  }
}

/* 12. REDUCED MOTION ===================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal],
  .steps[data-reveal] .step {
    opacity: 1;
    transform: none;
  }

  .lede[data-reveal] {
    clip-path: none;
  }

  .flyin__craft {
    display: none;
  }

  /* The journey map stays in its static fallback: route drawn, cards in a
     grid, nothing pinned and nothing to scrub. */
  .jm.is-live { height: auto; }

  .jm.is-live .jm__screen {
    position: static;
    height: auto;
    padding: var(--s-7) var(--s-3);
    overflow: visible;
  }

  .jm.is-live .jm__stage { flex: none; height: auto; transform: none !important; }

  .jm.is-live .jm__map { position: relative; inset: auto; height: auto; }

  .jm.is-live .jm__cards {
    position: static;
    display: grid;
    margin-top: var(--s-5);
    height: auto;
  }

  .jm.is-live .jm__card {
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
  }

  .jm.is-live .jm__craft { display: none; }

  .eyebrow[data-reveal] {
    letter-spacing: 0.2em;
  }
}

/* 13. PRINT ============================================================== */

@media print {
  .nav,
  .foot,
  .magnet,
  .hero__globe,
  .btn-row,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .band,
  .hero,
  .pagehead {
    padding: 0 0 1.5rem;
    background: #fff !important;
    color: #000 !important;
  }

  .faq__a {
    grid-template-rows: 1fr !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}