/* ============================================================
   06-journey — "A plan you can see. Progress you can feel."
   Scoped under .sec-06-journey.

   CLIENT REVISION: this used to be a scroll-pinned 400vh wrapper with four
   absolutely-stacked phases. That left a huge empty dark runway and a half-empty
   sticky viewport at every width, and the stacked phases could overlap. It is now
   four ordinary cards in normal flow, so the section is exactly as tall as its
   content at every width:
     >= 1100px  4 columns
     601-1099   2 columns
     <= 600     one column with a gold rail down the left
   Light lavender band (.on-lav) with white cards; gold chips, number badges, top
   borders and rail. Gold is never used as text on these light surfaces.
   ============================================================ */

.sec-06-journey {
  position: relative;
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* Wave: the services vignette's bottom edge (#eee8db) melts into the lavender band,
   with a thin gold rim under the curve. */
.sec-06-journey__wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(32px, 4.5vw, 64px);
  pointer-events: none;
  filter: drop-shadow(0 3px 0 var(--gold));
}

.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);
}
.sec-06-journey__head h2 { max-width: 20ch; }
.sec-06-journey__head p:not(.eyebrow) {
  margin-top: 1rem;
  color: var(--text-on-lav-dim);
  max-width: 52ch;
}

/* --- Timeline grid --- */
.sec-06-journey__stage {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
}
.sec-06-journey__phase { display: flex; min-width: 0; }

.sec-06-journey__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Photo on top of each card (DOM order stays text-first for reading order) */
.sec-06-journey__frame {
  order: -1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sec-06-journey__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The big ghost numeral becomes a gold number badge pinned on the photo */
.sec-06-journey__ghost {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  -webkit-text-stroke: 0;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 4px 14px hsl(267 40% 10% / 0.28);
}

.sec-06-journey__content {
  position: relative;
  flex: 1 1 auto;
  padding: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
}

.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(--lav);
  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.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.sec-06-journey__promise {
  color: var(--ink);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  margin-bottom: 1rem;
}

.sec-06-journey__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--text-on-lav-dim);
  font-size: 0.95rem;
  list-style: none;
  padding: 0;
}
.sec-06-journey__bullets li {
  position: relative;
  padding-left: 1.3rem;
  line-height: 1.5;
}
.sec-06-journey__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--gold);
}

/* --- Micro-CTA row --- */
.sec-06-journey__cta {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.sec-06-journey__cta-text {
  color: var(--text-on-lav-dim);
  max-width: 36ch;
  font-size: var(--fs-body);
}

/* --- Tablet: 2 x 2 --- */
@media (max-width: 1099px) {
  .sec-06-journey__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Mobile: one column + gold rail --- */
@media (max-width: 600px) {
  .sec-06-journey__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 5vw, 2rem);
    padding-left: 1.5rem;
  }
  .sec-06-journey__stage::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.3rem;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--gold), var(--accent));
  }
  .sec-06-journey__frame { aspect-ratio: 16 / 10; }
}

/* ============================================================
   PINNED MODE (restored scroll-pinned journey)
   Only when js/sections/06-journey.js adds .is-pinned (>=1100px wide AND >=800px
   tall AND motion allowed). Everything above is the fallback grid.

   What was wrong with the first pinned version, and the fix:
   - The heading scrolled away before the pin engaged and ~620px of content floated
     in a 824-1124px panel (100-290px of empty space above/below). Now the heading,
     dots and phase card all live INSIDE the pinned panel and are centered together.
   - The runway was a fixed 400vh at every size. Now 3 steps x 60vh on top of one
     panel, so the page is never longer than it needs to be.
   - Phases were absolutely stacked on a fixed min-height. They are now stacked with
     CSS grid (grid-area 1/1), so the stage is exactly as tall as the tallest phase
     and phases can't overlap or get cropped.
   Same colour tokens as the current section: no new colours here.
   ============================================================ */

/* Dots + rail + status (hidden in the fallback grid, where every phase is visible) */
.sec-06-journey__nav { display: none; }

.sec-06-journey.is-pinned { padding-top: calc(clamp(32px, 4.5vw, 64px) + 1rem); }

.sec-06-journey.is-pinned .sec-06-journey__pin-wrap {
  --journey-step: 60vh;
  position: relative;
  height: calc(100svh - var(--nav-h) + 3 * var(--journey-step));
}
.sec-06-journey.is-pinned .sec-06-journey__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vh, 1.75rem);
  overflow: hidden;
  padding-block: 0.5rem;
}

.sec-06-journey.is-pinned .sec-06-journey__head {
  padding: 0;
  margin: 0 auto;
  width: min(var(--container), 100% - 2.5rem);
}
.sec-06-journey.is-pinned .sec-06-journey__head h2 {
  max-width: 28ch;
  font-size: clamp(2rem, 1rem + 2.4vw, 3rem);
}
.sec-06-journey.is-pinned .sec-06-journey__head p:not(.eyebrow) { margin-top: 0.6rem; }
.sec-06-journey.is-pinned .sec-06-journey__head .eyebrow { margin-bottom: 0.6rem; }

/* Progress nav */
.sec-06-journey.is-pinned .sec-06-journey__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 30rem;
  margin-bottom: clamp(0.9rem, 2.2vh, 1.5rem);
}
.sec-06-journey__dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  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;
  height: 3px;
  transform: translateY(-50%);
  background: var(--lav-2);
  border-radius: 3px;
  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: 2px solid var(--accent);
  background: var(--white);
  color: var(--accent-strong);
  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 { transform: scale(1.06); }
.sec-06-journey__dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sec-06-journey__dot.is-active,
.sec-06-journey__dot[aria-current="true"] {
  background: var(--gold);
  border-color: var(--accent);
  color: var(--on-gold);
  transform: scale(1.08);
}
.sec-06-journey__status {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-on-lav-dim);
}
.sec-06-journey__status span { color: var(--ink); font-weight: 700; }

/* Stage: all phases share one grid cell; only the active one is visible */
.sec-06-journey.is-pinned .sec-06-journey__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.sec-06-journey.is-pinned .sec-06-journey__phase {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), visibility 0s linear 450ms;
}
.sec-06-journey.is-pinned .sec-06-journey__phase.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
/* the cards' scroll-reveal must not fight the crossfade */
.sec-06-journey.is-pinned .sec-06-journey__card[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Phase card: copy left, photo right, so the panel is filled left to right */
.sec-06-journey.is-pinned .sec-06-journey__card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
}
.sec-06-journey.is-pinned .sec-06-journey__content {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  align-self: center;
}
.sec-06-journey.is-pinned .sec-06-journey__frame {
  order: 0;
  aspect-ratio: auto;
  min-height: clamp(260px, 38vh, 380px);
}
.sec-06-journey.is-pinned .sec-06-journey__ghost { left: auto; right: 0.9rem; }

/* Reduced motion / no-JS never get .is-pinned, but be explicit */
@media (prefers-reduced-motion: reduce) {
  .sec-06-journey__phase, .sec-06-journey__rail-fill, .sec-06-journey__dot { transition: none !important; }
}