/* ============================================================
   06-journey — scroll-pinned 4-phase signature section.
   Scoped under .sec-06-journey. Desktop: sticky pin + crossfade
   driven by js/sections/06-journey.js. Mobile/reduced-motion:
   stacked cards, JS pinning logic does not engage (see guard).
   ============================================================ */

.sec-06-journey {
  /* Bright act: melts into 16-comebacks strip below (see elevation addendum).
     Was an --ink-based "dark act" gradient, then a flat brand orange; stacking
     three orange sections back to back read as too much of one color, so this
     "act" now runs through the client's pastel accent set instead (lavender
     here, into green in 16-comebacks, into yellow in 07-results). Text/icon
     pairs are flipped to dark ink so they keep popping against the pastel. */
  --text-on-ink: var(--accent-on);
  --text-on-ink-dim: hsl(30 15% 22%);
  background: linear-gradient(180deg, var(--color-lavender) 0%, var(--color-lavender) 70%, var(--color-green) 100%);
  position: relative;
}

.sec-06-journey h1,
.sec-06-journey h2,
.sec-06-journey h3,
.sec-06-journey h4 {
  color: var(--accent-on);
}
.sec-06-journey .eyebrow { color: var(--accent-on); }
.sec-06-journey .eyebrow::before { background: var(--accent-on); }

/* --- Wave divider: melts the services vignette's bottom edge (#eef1fb)
   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-on);
  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% 0% / 0.12);
  background: var(--white);
  color: var(--accent-on);
  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-on); }
.sec-06-journey__dot.is-active,
.sec-06-journey__dot[aria-current="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-on);
  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: var(--accent-on);
  margin-bottom: 0.75rem;
}

.sec-06-journey__promise {
  color: var(--accent-on);
  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-on);
}

.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) --- */
.sec-06-journey__cta {
  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(--accent-on); }

/* --- Desktop pinned crossfade --- */
/* Parent-qualified selectors so these outrank base.css's
   [data-reveal].is-visible (the phases carry data-reveal for mobile).
   Gated behind html.js: js/sections/06-journey.js is what adds/removes
   .is-active on scroll, so without JS this crossfade must not engage —
   otherwise phases 2-4 would carry opacity:0 forever with nothing to
   ever add .is-active to them. Without html.js, phases fall back to the
   plain in-flow .sec-06-journey__phase grid layout above (all 4 stacked
   and fully visible, same as the reduced-motion/mobile treatment). */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  html.js .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);
  }
  html.js .sec-06-journey .sec-06-journey__phase.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* --- Mobile / reduced-motion: stacked cards, no pinning --- */
@media (max-width: 820px), (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-on), 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; }

  .sec-06-journey__phase {
    position: relative;
    display: block;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-card);
    background: var(--white);
    border: 1px solid hsl(0 0% 0% / 0.06);
    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; }
}

/* --- No JS: same stacked-card fallback as mobile/reduced-motion above, at any
   viewport width. js/sections/06-journey.js is the only thing that ever adds
   .is-active to phases 2-4 or toggles the sticky pin's scroll-jack behavior;
   without it the sticky/overflow-hidden pin would clip everything after phase 1
   with no way to ever reveal the rest. html.js is set by an inline script in
   <head> the instant JS runs, so html:not(.js) reliably means "JS did not run." */
html:not(.js) .sec-06-journey__pin-wrap { height: auto; }
html:not(.js) .sec-06-journey__pin {
  position: static;
  top: auto;
  height: auto;
  display: block;
  overflow: visible;
}
html:not(.js) .sec-06-journey__nav { display: none; }
html:not(.js) .sec-06-journey__stage {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 8vw, 3rem);
  min-height: 0;
  padding-left: 1.75rem;
}
html:not(.js) .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-on), hsl(0 0% 100% / 0.12));
}
html:not(.js) .sec-06-journey__phase {
  position: relative;
  display: block;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.06);
  overflow: hidden;
}
html:not(.js) .sec-06-journey__ghost {
  top: -0.6rem;
  left: 0.5rem;
  font-size: clamp(4.5rem, 24vw, 7.5rem);
  opacity: 0.6;
}
html:not(.js) .sec-06-journey__content { margin-bottom: 1.5rem; }
html:not(.js) .sec-06-journey__bullets { max-width: none; }
html:not(.js) .sec-06-journey__frame { aspect-ratio: 16 / 10; }

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