/* Osprey Carriers — site styles. Tokens follow brand guide §6, §7, §9. */

:root {
  --bone: #F4F0E6;
  --bone-1: #EDEBE3;
  --bone-2: #E2E2DC;
  --mid: #C9CDCB;
  --deep: #16293C;
  --deep-2: #213A52;
  --eye: #E9A227;
  --ink: #111418;
  --drift: #7A8189;
  --surface: #FAF8F2;
  --rule: rgba(22, 41, 60, .14);
  /* Task 62: text/stroke on a Deep Water ground (the voyage section) --
     named for what they're used on, not borrowed from a different
     file's token set (biz_console's --on-chrome/--on-chrome-2 don't
     exist here and wouldn't mean anything in this file's own system). */
  --on-deep: var(--bone);
  --on-deep-muted: rgba(244, 240, 230, .7);
  --rule-on-deep: rgba(244, 240, 230, .18);

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-slow: 650ms;
  --t-fast: 220ms;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--eye); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--deep); color: var(--bone); padding: 10px 14px; border-radius: var(--r-sm); z-index: 10; }
.skip:focus { top: 12px; }
.code { font-family: var(--f-mono); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Buttons ---------- */
.d { white-space: nowrap; }
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 .98rem/1 var(--f-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn--sm { min-height: 38px; padding: 0 16px; font-size: .9rem; }
.btn--accent { background: var(--eye); color: var(--deep); }
.btn--accent:hover { background: #F0B444; }
.btn--deep { background: var(--deep); color: var(--bone); }
.btn--deep:hover { background: var(--deep-2); }
.btn--ghost { border-color: var(--deep); color: var(--deep); }
.btn--ghost:hover { background: var(--deep); color: var(--bone); }
.btn--quiet { background: transparent; color: var(--deep); padding: 0 6px; }
.btn--quiet:hover { text-decoration: underline; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Header (merged with hero; sticky once you scroll) ----------
   Sticky the whole time technically (there's nothing above it to begin
   with, so it costs nothing at scroll position 0) -- .is-stuck only
   adds the visual cue (hairline + shadow) once content is actually
   scrolling underneath it, so it still reads as "merged with hero"
   until that happens. */
.top {
  background: var(--bone);
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow var(--t-fast) var(--ease);
}
.top.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 10px 22px -18px rgba(22, 41, 60, .4); }
.top__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.wordmark {
  font: 700 1.02rem/1 var(--f-display); letter-spacing: .04em; color: var(--deep);
  text-decoration: none; white-space: nowrap;
}
.wordmark--light { color: var(--bone); }
.nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); font-size: .95rem; }
.nav a:not(.btn) { text-decoration: none; color: var(--deep); }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.lang { background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--drift); }
.lang:hover { color: var(--deep); }
@media (max-width: 760px) {
  .nav__hide { display: none; }
  .nav .btn { display: none; }
}

/* ---------- Hero ---------- */
/* Task 67: a full-bleed photo under a heavy Deep Water overlay replaces
   the flat Bone ground here specifically -- Task 62's "header + hero
   share Bone" rhythm still holds for the header bar itself, which stays
   as it was; only the hero section below it goes dark. At 75-85%
   opacity the photo stops being content and becomes ground, so every
   text colour in this section flips to the same --on-deep/--on-deep-
   muted tokens .voyage already uses on its own Deep Water ground. */
.hero { position: relative; background: var(--deep); padding: clamp(28px, 6vw, 72px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture, .hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(22, 41, 60, .8); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 88px); align-items: end; }
.hero__title {
  font-weight: 750; font-stretch: 78%; text-wrap: balance;
  font-size: clamp(2.9rem, 8.2vw, 6.4rem); line-height: .94; letter-spacing: -.012em;
  color: var(--on-deep); max-width: 11ch;
}
.hero__lead { margin-top: 24px; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.45; max-width: 30ch; color: var(--on-deep); }
.hero__cycle { margin-top: 28px; color: var(--on-deep-muted); font-size: .98rem; }
.hero__cycle .d { color: var(--on-deep); font-weight: 600; }
/* Task 62: "a 1px Osprey Eye rule, only as wide as the text column,
   not the full viewport -- a full-width rule reads as a divider where
   this one reads as deliberate." Matches .hero__lead's own max-width
   rather than the copy column's full grid-track width. */
.hero__copy::after {
  content: ""; display: block; margin-top: clamp(28px, 5vw, 44px);
  width: 100%; max-width: 30ch; height: 1px; background: var(--eye);
}

.picker {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  /* Task 62: "the thing a visitor can touch should look like a thing"
     -- a soft shadow is what makes it read as an object placed on the
     page rather than a region of it, the edge alone wasn't enough. */
  box-shadow: 0 16px 32px -20px rgba(22, 41, 60, .28);
}
.picker__title { font-weight: 600; font-stretch: 90%; font-size: 1.2rem; color: var(--deep); margin-bottom: 8px; }
.picker__list { list-style: none; margin: 0; padding: 0; }
.picker__foot { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.picker__label { display: block; font-size: .85rem; color: var(--drift); }
.picker__total { font: 700 1.9rem/1.1 var(--f-display); font-stretch: 85%; color: var(--deep); font-variant-numeric: tabular-nums; }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Item rows (hero picker and step 1 share this) ---------- */
.item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.item:last-child { border-bottom: 0; }
.item__name { font-size: .98rem; line-height: 1.3; min-width: 0; }
.item__t { display: block; }
.item__note { display: block; font-size: .82rem; color: var(--drift); }
.item__price { font-variant-numeric: tabular-nums; color: var(--drift); font-size: .95rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; }
.qty button {
  width: 36px; height: 36px; border: 0; background: none; cursor: pointer; border-radius: 999px;
  font-size: 1.15rem; line-height: 1; color: var(--deep);
}
.qty button:hover { background: var(--bone-2); }
.qty button:disabled { color: var(--mid); cursor: default; background: none; }
.qty output { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.item.is-on .item__t { color: var(--deep); font-weight: 600; }
.item__extra { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; padding: 4px 0 6px; }
.field--sm { margin-top: 0; }
.field--sm span { font-size: .82rem; font-weight: 500; color: var(--drift); }
.field--sm input { min-height: 42px; }

/* ---------- Sections ---------- */
.section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); }
/* Task 62: the chapter mark -- a 72px Osprey Eye rule, a section
   number, then the existing h2. Only on sections with [data-n]; the
   three promises and the cycle line have no h2 of their own to attach
   one to, left as they are rather than inventing new heading markup
   for sections that weren't built with one. */
.section-head[data-n] { display: flex; flex-direction: column; }
.section-head[data-n]::before {
  content: ""; order: 1; width: 72px; height: 2px; background: var(--eye); margin-bottom: 14px;
}
.section-head[data-n]::after {
  content: attr(data-n); order: 2; margin-bottom: 10px;
  font: 700 13px var(--f-display); letter-spacing: .1em; color: var(--eye);
}
.section-head[data-n] > * { order: 3; }
.section-head h2 { font-weight: 650; font-stretch: 86%; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.02; color: var(--deep); letter-spacing: -.005em; }
.section-head p { margin-top: 14px; font-size: 1.08rem; color: #3A4048; max-width: 52ch; }
.notice { display: inline-block; margin-top: 16px !important; padding: 6px 12px; border-radius: 999px; background: rgba(233, 162, 39, .16); color: var(--deep) !important; font-size: .9rem !important; }

/* ---------- Promises ---------- */
.promises { background: var(--surface); padding-bottom: clamp(64px, 9vw, 120px); }
.promises__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--rule); padding-top: 32px; }
.promise h3 { font-weight: 650; font-stretch: 88%; font-size: 1.3rem; color: var(--deep); margin-bottom: 8px; }
.promise p { color: #3A4048; max-width: 36ch; }
@media (max-width: 760px) { .promises__row { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- Voyage line ---------- */
/* Task 62: solid Deep Water, not a gradient -- a continuous fade
   across every section was what made the whole page read as one
   undifferentiated length to begin with. This is the first of the
   two dark bands that give the page a spine, and the route line in
   Osprey Eye on Deep Water is the most striking image the brand can
   make without a camera (brand guide v1.2 §9) -- currently spent on a
   pale background where it barely registered. */
.voyage { background: var(--deep); padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 10vw, 128px); }
.voyage .section-head h2, .voyage .section-head[data-n]::after { color: var(--on-deep); }
.voyage .section-head p { color: var(--on-deep-muted); }
.voyage .stage h3 { color: var(--on-deep); }
.voyage .stage p { color: var(--on-deep-muted); }
.voyage .event { border-top-color: var(--rule-on-deep); }
.voyage .event__head { color: var(--on-deep); }
.voyage .event__step, .voyage .event__where { color: var(--on-deep-muted); }
.voyage .event__title { color: var(--on-deep); }
.voyage .route__ghost { stroke: var(--on-deep-muted); }
.voyage .route__line { stroke: var(--eye); }
.voyage .route__stop { fill: var(--deep); stroke: var(--on-deep-muted); }
.voyage .route__stop.is-on { fill: var(--eye); stroke: var(--eye); }
.voyage .route__place { fill: var(--on-deep); }
.voyage .route__sea { fill: var(--on-deep-muted); }
.voyage .realroute { border-top-color: var(--rule-on-deep); }
.voyage .realroute summary { color: var(--on-deep); }
.voyage .realroute__lead, .voyage .fineprint { color: var(--on-deep-muted); }
.voyage .rr__line { stroke: var(--on-deep); }
.voyage .rr__dot { fill: var(--deep); stroke: var(--on-deep-muted); }
.voyage .rr__place { fill: var(--on-deep); }
.voyage .rr__note { fill: var(--on-deep-muted); }
.voyage .labelblock { border-top-color: var(--rule-on-deep); }
.voyage .labelblock__lead { color: var(--on-deep-muted); }
.voyage__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); }
.voyage__stick {
  position: sticky; top: 8%; align-self: start;
  /* Task 62: "check the stage list and the event card read correctly
     on dark as well" -- the sticky panel sits ON the Deep Water
     ground now, not as a light card floating on it. */
  background: var(--deep-2); border: 1px solid var(--rule-on-deep); border-radius: var(--r-lg);
  padding: clamp(14px, 2.4vw, 26px);
}
.route { margin: 0; }
.route__svg { width: 100%; height: auto; overflow: visible; }
.route__ghost { fill: none; stroke: var(--drift); stroke-opacity: .3; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.route__line { fill: none; stroke: var(--deep); stroke-width: 3; stroke-linecap: round; }
.route__stop { fill: var(--bone-1); stroke: var(--drift); stroke-width: 1.5; transition: fill var(--t-slow) var(--ease), stroke var(--t-slow) var(--ease); }
.route__stop.is-on { fill: var(--deep); stroke: var(--deep); }
.route__tip { fill: var(--eye); }
.route__place { font: 600 18px var(--f-display); fill: var(--deep); }
.route__sea { font: italic 400 15px var(--f-body); fill: var(--drift); letter-spacing: .06em; }

.event { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); min-height: 104px; }
.event__head { display: flex; justify-content: space-between; align-items: baseline; color: var(--deep); }
.event__step { font-size: .85rem; color: var(--drift); font-variant-numeric: tabular-nums; }
.event__title { margin-top: 10px; font: 650 1.25rem/1.2 var(--f-display); font-stretch: 88%; color: var(--deep); }
.event__where { margin-top: 4px; color: var(--drift); font-size: .95rem; }
.handover { margin-top: 14px; }
.handover__frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, #4C6378 0%, transparent 60%),
    linear-gradient(160deg, #2A4258 0%, var(--deep) 100%);
  display: grid; place-items: center;
}
.handover__ph { color: rgba(244, 240, 230, .7); font-size: .9rem; }
.handover__mark { position: absolute; right: 12px; bottom: 10px; font: 700 .8rem var(--f-display); letter-spacing: .06em; color: rgba(255, 255, 255, .2); }
.handover__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.stages { list-style: none; margin: 0; padding: 0; }
.stage { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .32; transition: opacity var(--t-slow) var(--ease); }
.stage:first-child { min-height: 40vh; justify-content: flex-start; padding-top: 8px; }
.stage:last-child { min-height: 46vh; }
.stage.is-on { opacity: 1; }
.stage h3 { font-weight: 650; font-stretch: 86%; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; color: var(--deep); }
.stage p { margin-top: 10px; max-width: 40ch; color: #3A4048; }

/* ---------- The real route (static, closed by default) ----------
   Brand guide §9: "one signature moment," "at most one moving thing
   per screen." Nothing here moves -- this is the one place on the
   page it's fine to show a second path, because it's a diagram you
   open on purpose, not something competing for attention on scroll. */
.realroute { margin-top: clamp(28px, 5vw, 56px); border-top: 1px solid var(--rule); padding-top: 24px; }
.realroute summary { cursor: pointer; color: var(--deep); font-weight: 600; width: fit-content; }
.realroute summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.realroute__lead { max-width: 60ch; }
.rr { margin: 18px 0 0; max-width: 640px; }
.rr__svg { width: 100%; height: auto; overflow: visible; }
.rr__line { fill: none; stroke: var(--deep); stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.rr__dot { fill: var(--bone); stroke: var(--deep); stroke-width: 1.5; }
.rr__dot--end { fill: var(--eye); stroke: var(--eye); }
.rr__place { font: 600 15px var(--f-display); fill: var(--deep); }
.rr__note { font: 400 11.5px var(--f-body); fill: var(--drift); }

/* ---------- Task 67: Kansas City / Gambia coast, one static row ----------
   Lives on the Deep Water ground already established for .voyage --
   each photo gets the same Deep Water overlay treatment as the hero
   (brand guide v1.2 §9 craft rule 2), lighter than the hero's own
   75-85% since these stay legible as photographs, not pure ground. */
.placepair { margin-top: clamp(28px, 5vw, 56px); border-top: 1px solid var(--rule-on-deep); padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 24px); }
.placepair__item { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 2; }
.placepair__item picture, .placepair__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placepair__item::after { content: ""; position: absolute; inset: 0; background: rgba(22, 41, 60, .55); }
.placepair__item figcaption {
  position: absolute; left: 12px; bottom: 10px; z-index: 1;
  font: 600 .85rem var(--f-body); color: var(--on-deep); letter-spacing: .01em;
}
@media (max-width: 560px) { .placepair { grid-template-columns: 1fr; } }

/* ---------- Task 63: the actual label, sample data ----------
   Proportioned from the real print layout (biz_console/intake.html's
   .plab: @page{size:6in 4in}) -- 3:2, not guessed. */
.labelblock { margin-top: clamp(28px, 5vw, 56px); border-top: 1px solid var(--rule); padding-top: 24px; }
.labelblock__lead { max-width: 56ch; }
.labelblock__sample { margin-top: 18px; }
.splab {
  width: 100%; max-width: 420px; aspect-ratio: 3 / 2; box-sizing: border-box;
  background: #fff; color: #111; border: 2px solid var(--deep); border-radius: 6px;
  padding: 16px 18px; display: flex; flex-direction: column;
  font-family: var(--f-body); box-shadow: 0 10px 22px -14px rgba(22, 41, 60, .35);
}
.spl-top { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid #111; padding-bottom: 6px; }
.spl-brand { font: 700 15px var(--f-display); letter-spacing: .04em; }
.spl-voy { font: 600 10px/1.35 var(--f-mono); text-align: right; color: #333; }
.spl-mid { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; flex: 1; min-height: 0; }
.spl-qrcol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.spl-qr { width: 78px; height: 78px; }
.spl-qr svg { width: 100%; height: 100%; display: block; }
.spl-code { font: 700 13px var(--f-mono); letter-spacing: .02em; }
.spl-group { font: 700 11px var(--f-display); letter-spacing: .02em; background: var(--eye); color: #111; padding: 1px 6px; border-radius: 3px; }
.splab dl { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; flex: 1; min-width: 0; font-size: 10.5px; }
.splab dt { color: #666; font-size: 8.5px; margin: 0; letter-spacing: .03em; }
.splab dd { margin: 0 0 4px; font-weight: 600; overflow-wrap: break-word; }
.spl-foot { margin-top: auto; border-top: 1px solid #ccc; padding-top: 5px; font-size: 8.5px; color: #444; display: flex; justify-content: space-between; gap: 8px; }

@media (max-width: 880px) {
  .voyage__grid { grid-template-columns: 1fr; gap: 0; }
  .voyage__stick {
    /* top:0 would tuck this under the now-sticky header instead of
       below it -- header reserves var(--header-h) at the real top. */
    top: var(--header-h); z-index: 2; border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 0;
    margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 12px;
    box-shadow: 0 10px 18px -14px rgba(22, 41, 60, .35);
  }
  .event { margin-top: 6px; padding-top: 10px; min-height: 0; }
  .event__title { font-size: 1.05rem; }
  .handover__frame { aspect-ratio: 16 / 7; }
  .stage { min-height: 50vh; }
  .stage:first-child { min-height: 34vh; padding-top: 28px; }
}

/* ---------- Proof strip ---------- */
.proof { background: linear-gradient(180deg, var(--bone-1) 0%, var(--bone-2) 100%); padding: clamp(56px, 8vw, 104px) 0; }
.proof__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap: 14px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.proof__strip::-webkit-scrollbar { display: none; }
.clip { scroll-snap-align: start; margin: 0; }
.clip__media {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(170deg, #31485D 0%, var(--deep) 100%);
}
.clip__media video, .clip__media img { width: 100%; height: 100%; object-fit: cover; }
.clip__pending { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: rgba(244, 240, 230, .62); font-size: .88rem; }
.clip__pending::before {
  content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(244, 240, 230, .22); border-radius: var(--r-sm);
}
.clip__play {
  position: absolute; left: 12px; bottom: 12px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(244, 240, 230, .92); color: var(--deep); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.clip figcaption { margin-top: 10px; font-size: .92rem; color: #3A4048; }
@media (max-width: 760px) { .proof__strip { grid-auto-columns: 62%; } }

/* ---------- Quote ---------- */
.quote { background: var(--bone); padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 9vw, 120px); }
.quote__grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 880px) { .quote__grid { grid-template-columns: 1fr; } }

.steps { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); }
.steps__nav { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.steps__nav button {
  width: 100%; display: flex; gap: 10px; align-items: center; text-align: left;
  padding: 10px 0 12px; background: none; border: 0; border-bottom: 2px solid var(--rule);
  color: var(--drift); cursor: pointer; font-size: .92rem; line-height: 1.25;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.steps__nav button[aria-selected="true"] { color: var(--deep); border-color: var(--deep); font-weight: 600; }
.steps__n {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid currentColor; font-size: .8rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) { .steps__nav button span:not(.steps__n) { font-size: .8rem; } }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step:not([hidden]) { animation: stepIn 420ms var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.items { list-style: none; margin: 0; padding: 0; }
.step__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }

.choice + .choice { margin-top: 22px; }
.choice__label { font-weight: 600; color: var(--deep); margin-bottom: 10px; }
.choice__opts { display: grid; gap: 8px; }
.opt { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; border: 1px solid var(--rule); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.opt:hover { border-color: var(--drift); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) { border-color: var(--deep); background: rgba(22, 41, 60, .045); box-shadow: inset 0 0 0 1px var(--deep); }
.opt:has(input:focus-visible) { outline: 2px solid var(--eye); outline-offset: 2px; }
.opt__price { color: var(--drift); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt__name b { display: block; font-weight: 600; color: var(--deep); }
.opt__name span { display: block; font-size: .86rem; color: var(--drift); }
.choice > .fineprint { margin-top: 8px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .pair { grid-template-columns: 1fr; } }
.field select { min-height: 48px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff; width: 100%; }
.field select:focus { border-color: var(--deep); outline: none; box-shadow: 0 0 0 3px rgba(233, 162, 39, .35); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

.value { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.value__toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.value__toggle input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--deep); flex: none; }
.value__toggle strong { color: var(--deep); }
.value__body { display: block; font-size: .92rem; color: #3A4048; margin-top: 2px; }

.field { display: grid; gap: 6px; margin-top: 14px; }
.field span { font-size: .92rem; color: var(--deep); font-weight: 500; }
.field input {
  min-height: 48px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-md); background: #fff;
}
.field input:focus { border-color: var(--deep); outline: none; box-shadow: 0 0 0 3px rgba(233, 162, 39, .35); }
.fineprint { margin-top: 12px; font-size: .86rem; color: var(--drift); }

.summary { position: sticky; top: 24px; padding: 22px; border-radius: var(--r-lg); background: var(--deep); color: var(--bone); }
.summary h3 { font-weight: 650; font-stretch: 88%; font-size: 1.25rem; }
.summary__big { display: block; margin-top: 6px; font: 750 2.8rem/1 var(--f-display); font-stretch: 82%; font-variant-numeric: tabular-nums; }
.summary__voyage { margin-top: 8px; font-size: .9rem; color: rgba(244, 240, 230, .72); }
.summary__duty { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--deep-2); font-size: .9rem; color: rgba(244, 240, 230, .85); }
.summary__duty strong { display: block; color: var(--bone); margin-bottom: 4px; }
.summary__sail { padding-top: 12px; border-top: 1px solid rgba(244, 240, 230, .18); }
.summary__lines { margin: 18px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: .95rem; }
.summary__lines dt { color: rgba(244, 240, 230, .82); }
.summary__lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summary__lines .is-empty { grid-column: 1 / -1; color: rgba(244, 240, 230, .55); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(244, 240, 230, .18); }
.summary__total span { font-weight: 600; }
.summary__total output { font: 750 2rem/1 var(--f-display); font-stretch: 82%; font-variant-numeric: tabular-nums; }
.summary .fineprint { color: rgba(244, 240, 230, .62); }
@media (max-width: 880px) { .summary { position: static; } }

/* ---------- Cycle line (Bone flows into Deep Water) ---------- */
/* Task 62: solid Bone, not a continuous fade into Deep Water -- the
   one remaining gradient moves to .foot below, which is the single
   transition brand guide v1.2 §9 still allows ("nowhere else"). */
.cycle {
  background: var(--bone);
  padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 96px);
  color: var(--ink);
}
.cycle__line { font: 700 clamp(2rem, 5.6vw, 4.4rem)/1.02 var(--f-display); font-stretch: 80%; letter-spacing: -.01em; max-width: 18ch; color: var(--deep); }
.cycle__line .d { color: var(--deep); white-space: nowrap; }
.cycle__days { margin-top: 18px; color: var(--drift); font-size: 1.05rem; }
/* Task 64: inside 7 days, the one place a day-count earns the accent. */
.cycle__days--soon { color: var(--eye); font-weight: 600; }

/* ---------- Footer ---------- */
/* The one gradient brand guide v1.2 §9 still allows: Bone (where
   .cycle left off) fading to Deep Water over the footer's own first
   120px, solid Deep Water for the rest -- a CSS gradient with no stop
   after its last colour holds that colour for the remaining length,
   so this needs no separate transition element. */
.foot { background: linear-gradient(180deg, var(--bone) 0, var(--deep) 120px); color: var(--bone); padding: 8px 0 28px; }
.foot__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(244, 240, 230, .14); }
.foot__tag { margin-top: 8px; color: rgba(244, 240, 230, .7); font-size: .95rem; }
.foot__links { display: flex; gap: 22px; flex-wrap: wrap; font-size: .95rem; }
.foot__links a { text-decoration: none; color: rgba(244, 240, 230, .85); }
.foot__links a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { margin-top: 22px; font-size: .8rem; color: rgba(244, 240, 230, .5); max-width: 70ch; }
.noscript { padding: 16px var(--gutter); background: var(--eye); color: var(--deep); }

/* ---------- Reveal: fade + 14px rise, section heads only ---------- */
.reveal { transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-pending { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-pending { opacity: 1; transform: none; transition: none; }
  .stage { opacity: 1; transition: none; }
  .step:not([hidden]) { animation: none; }
  .route__stop { transition: none; }
}

/* ---------- Terms page ---------- */
.terms { padding-bottom: 80px; }
.terms .hero__title { font-size: 2.6rem; max-width: none; }
.terms p { margin-top: 16px; max-width: 60ch; }

/* ---------- Narrow-screen fixes for the quote ---------- */
.quote__grid > * { min-width: 0; }
.steps__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step__nav { flex-wrap: wrap; }
@media (max-width: 520px) {
  .step__nav .btn--accent { flex: 1 1 100%; white-space: normal; text-align: center; padding: 12px 18px; line-height: 1.25; }
}

/* ---------- Rate card ---------- */
.ratecard { margin-top: 22px; }
.ratecard summary { cursor: pointer; color: var(--deep); font-weight: 600; padding: 8px 0; width: fit-content; }
.ratecard summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.ratecard__scroll { overflow-x: auto; margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.ratecard table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; }
.ratecard caption { text-align: left; padding: 12px 16px 4px; color: var(--drift); font-size: .88rem; }
.ratecard th { text-align: left; font-weight: 600; font-size: .85rem; color: var(--drift); padding: 10px 16px; border-bottom: 1px solid var(--deep); }
.ratecard td { padding: 11px 16px; border-bottom: 1px solid var(--rule); }
.ratecard tr:last-child td { border-bottom: 0; }
.ratecard .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ratecard td:first-child { font-weight: 600; color: var(--deep); }
.ratecard .fineprint { max-width: 70ch; }

/* ---------- Before you pack ---------- */
.pack { background: var(--surface); padding: 0 0 clamp(40px, 6vw, 72px); }
.packstrip {
  margin: 0 0 clamp(24px, 4vw, 40px); position: relative; border-radius: var(--r-lg);
  overflow: hidden; aspect-ratio: 1400 / 420;
}
.packstrip picture, .packstrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.packstrip::after { content: ""; position: absolute; inset: 0; background: rgba(22, 41, 60, .5); }
.pack__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); border-top: 1px solid var(--rule); padding-top: 28px; }
.pack h3 { font-weight: 650; font-stretch: 88%; font-size: 1.3rem; color: var(--deep); margin-bottom: 10px; }
.pack p { color: #3A4048; max-width: 54ch; }
.pack p + p { margin-top: 12px; }
.pack__list { margin: 12px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; color: #3A4048; }
.pack__list li { break-inside: avoid; margin-bottom: 4px; }
@media (max-width: 760px) { .pack__grid { grid-template-columns: 1fr; } .pack__list { columns: 1; } }

.cycle__then { margin-top: 8px; color: rgba(244, 240, 230, .55); font-size: .95rem; }
.foot__serve { margin-top: 22px; font-size: .88rem; color: rgba(244, 240, 230, .7); }
.foot__serve + .foot__legal { margin-top: 8px; }
.hero__grid > *, .voyage__grid > * { min-width: 0; }
.item { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 400px) { .item { gap: 8px; } .item__price { font-size: .88rem; } .qty button { width: 32px; } }
.picker__foot { flex-wrap: wrap; }
@media (max-width: 400px) { .picker__foot .btn { flex: 1 1 100%; } }
[hidden] { display: none !important; }
.field { min-width: 0; }
.field input, .field select { width: 100%; min-width: 0; }
.item__extra { grid-template-columns: repeat(auto-fill, minmax(118px, 168px)); }

/* ---------- Scroll to top ---------- */
.totop {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px);
  width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--deep); color: var(--bone);
  box-shadow: 0 10px 22px -10px rgba(22, 41, 60, .5);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  z-index: 40;
}
.totop.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.totop:hover { background: var(--deep-2); }
.totop svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .totop { transition: opacity var(--t-fast) linear; transform: none; } }