/* ============================================================
   06-journey — scroll-pinned 4-phase signature section.
   Scoped under .sec-06-journey. Desktop: sticky pin + crossfade
   driven by js/sections/06-journey.js, at every width (mobile pins
   a one-column card). Reduced motion: stacked cards, JS pinning
   logic does not engage (see guard).
   ============================================================ */

.sec-06-journey {
  /* Dark act: melts into 16-comebacks strip below (see elevation addendum) */
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 70%, #0a1418 100%);
  position: relative;
}

/* --- Wave divider: melts the services vignette's bottom edge (#eee8db)
   into this dark section — see css/sections/05-services.css background. */
.sec-06-journey__wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(32px, 4.5vw, 64px);
  pointer-events: none;
}

.sec-06-journey__head {
  /* Extra top padding clears the wave (max ~64px) so it never overlaps the eyebrow/H2 */
  padding-top: calc(var(--sp-section) + clamp(32px, 4.5vw, 64px));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  max-width: 46ch;
}
.sec-06-journey__head p:not(.eyebrow) {
  margin-top: 1rem;
  color: var(--text-on-ink-dim);
  max-width: 52ch;
}

/* --- Pin wrapper --- */
.sec-06-journey__pin-wrap {
  position: relative;
  height: 400vh;
}

.sec-06-journey__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* .sec-06-journey__inner sizing comes from the shared .container class —
   don't override its width or the pinned content goes full-bleed. */

/* --- Progress nav (dots + rail + status) --- */
.sec-06-journey__nav {
  /* positioned so the absolutely-placed rail anchors here, not the sticky pin */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  max-width: 30rem;
}

.sec-06-journey__dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

.sec-06-journey__dot-item { position: relative; z-index: 2; }

.sec-06-journey__rail {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  top: 1.2rem; /* vertical center of the 2.4rem dots row */
  height: 2px;
  transform: translateY(-50%);
  background: hsl(0 0% 100% / 0.15);
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
}

.sec-06-journey__rail-fill {
  display: block;
  height: 100%;
  width: calc(var(--journey-fill, 0) * 100%);
  background: var(--accent);
  transition: width 500ms var(--ease-out);
}

.sec-06-journey__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid hsl(0 0% 100% / 0.25);
  background: var(--ink-2);
  color: var(--text-on-ink-dim);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out),
    border-color 300ms var(--ease-out), transform 300ms var(--ease-spring);
}
.sec-06-journey__dot:hover { border-color: var(--accent); }
.sec-06-journey__dot.is-active,
.sec-06-journey__dot[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  transform: scale(1.08);
}

.sec-06-journey__status {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-on-ink-dim);
}
.sec-06-journey__status strong,
.sec-06-journey__status span { color: var(--text-on-ink); font-weight: 600; }

/* --- Stage --- */
.sec-06-journey__stage {
  position: relative;
  min-height: clamp(360px, 46vw, 480px);
}

.sec-06-journey__line { display: none; }

.sec-06-journey__phase {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  /* Top-align so the photo tracks the content block instead of sinking
     toward the vertical center of the tall pinned stage */
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.sec-06-journey__frame {
  margin-top: 1.25rem; /* optical alignment with the timeline chip / phase name */
}

.sec-06-journey__ghost {
  position: absolute;
  top: -0.35em;
  left: -0.02em;
  z-index: 0;
}

.sec-06-journey__content {
  position: relative;
  z-index: 1;
}

.sec-06-journey__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.sec-06-journey__chip-icon { flex-shrink: 0; }

.sec-06-journey__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--accent-h) 25% 62%);
  margin-bottom: 0.75rem;
}

.sec-06-journey__promise {
  color: var(--white);
  margin-bottom: 1.25rem;
}

.sec-06-journey__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  color: var(--text-on-ink-dim);
  max-width: 34ch;
}
.sec-06-journey__bullets li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.5;
}
.sec-06-journey__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.sec-06-journey__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lift);
  /* Capped so the photo's height roughly matches the text block — keeps the
     two columns reading as one even row instead of the photo dominating */
  max-width: 460px;
  justify-self: end;
  width: 100%;
}
.sec-06-journey__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Micro-CTA row (below pinned wrapper) ---
   --journey-cta-pull is set by js/sections/06-journey.js to half of the gap
   between the last phase photo and this text, so the text sits closer to it. */
.sec-06-journey__cta {
  margin-top: calc(-1 * var(--journey-cta-pull, 0px));
  padding-block: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.sec-06-journey__cta-text {
  color: var(--text-on-ink-dim);
  max-width: 36ch;
  font-size: var(--fs-body);
}
.sec-06-journey__cta-btn { color: var(--white); }

/* --- Desktop pinned crossfade --- */
/* Parent-qualified selectors so these outrank base.css's
   [data-reveal].is-visible (the phases carry data-reveal for mobile). */
@media (prefers-reduced-motion: no-preference) {
  .sec-06-journey .sec-06-journey__phase {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  }
  .sec-06-journey .sec-06-journey__phase.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* --- Reduced motion: stacked cards, no pinning --- */
@media (prefers-reduced-motion: reduce) {
  .sec-06-journey__pin-wrap { height: auto; }
  .sec-06-journey__pin {
    position: static;
    top: auto;
    height: auto;
    display: block;
    overflow: visible;
  }
  .sec-06-journey__nav { display: none; }

  .sec-06-journey__stage {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 8vw, 3rem);
    min-height: 0;
    padding-left: 1.75rem;
  }

  .sec-06-journey__line {
    display: block;
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.35rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), hsl(0 0% 100% / 0.12));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 900ms var(--ease-out);
  }
  .sec-06-journey__line.is-visible { transform: scaleY(1); }
  html.reduced-motion .sec-06-journey__line { transform: scaleY(1); transition: none; }

  /* Stacked: the only gap above the CTA text is its own top padding; halve it */
  .sec-06-journey__cta { padding-top: clamp(1.25rem, 2vw, 2rem); }
}

/* --- Mobile / reduced-motion: phase card look --- */
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .sec-06-journey__phase {
    position: relative;
    display: block;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-card);
    background: var(--ink-2);
    border: 1px solid hsl(0 0% 100% / 0.08);
    overflow: hidden;
  }

  .sec-06-journey__ghost {
    top: -0.6rem;
    left: 0.5rem;
    font-size: clamp(4.5rem, 24vw, 7.5rem);
    opacity: 0.6;
  }

  .sec-06-journey__content { margin-bottom: 1.5rem; }
  .sec-06-journey__bullets { max-width: none; }

  .sec-06-journey__frame { aspect-ratio: 16 / 10; }
}

/* --- Mobile pinned: the phase cards share one grid cell and crossfade like
   desktop. The pinned column is capped at the viewport, and the photo is the
   part that gives way on short screens so every phase fits without clipping. --- */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .sec-06-journey__pin { padding-block: 1rem; }
  .sec-06-journey__inner {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .sec-06-journey__nav {
    flex-shrink: 0;
    margin-bottom: 1.25rem;
  }
  .sec-06-journey__stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    flex: 0 1 auto;
    min-height: 0;
  }
  .sec-06-journey .sec-06-journey__phase {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 0; /* the desktop column gap; the stacked card spaced these with margins */
    min-height: 0;
  }
  .sec-06-journey__content { flex-shrink: 0; }
  .sec-06-journey__frame {
    flex: 0 1 auto;
    min-height: 0;
  }
}

/* Short phones: tighten the card chrome so the photo keeps a usable height */
@media (max-width: 820px) and (max-height: 760px) and (prefers-reduced-motion: no-preference) {
  .sec-06-journey__pin { padding-block: 0.5rem; }
  .sec-06-journey__nav { gap: 0.6rem; margin-bottom: 0.75rem; }
  .sec-06-journey .sec-06-journey__phase { padding: 1.25rem 1.25rem; }
  .sec-06-journey__chip { margin-bottom: 0.6rem; }
  .sec-06-journey__name { margin-bottom: 0.4rem; }
  .sec-06-journey__promise { margin-bottom: 0.75rem; }
  .sec-06-journey__bullets { gap: 0.35rem; }
  .sec-06-journey__content { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-06-journey__dot,
  .sec-06-journey__rail-fill,
  .sec-06-journey__phase {
    transition: none;
  }
}