/* Begin Your Journey only: the short description under each "How it works" step.
   Linked from src/pages/begin.astro. Every rule is scoped to .journey-steps. */

.journey-steps p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.journey-steps a {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-underline-offset: 0.3em;
}

.journey-steps a:hover,
.journey-steps a:focus-visible {
  color: var(--coral-dark);
}

.journey-steps a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* "Already spoken with us?" now follows the inquiry form, just above the navy
   footer, so it takes a light band to stay distinct from it. */
.journey-ready {
  padding: clamp(1.75rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
  background: var(--sage-pale);
  color: var(--navy);
}

.journey-ready .eyebrow {
  color: var(--navy);
}

.journey-ready h2 {
  color: var(--navy);
}

/* The promise sits beneath the photograph as its caption, so the whole scene
   stays visible instead of being covered. */
.journey-entry__visual {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--navy);
}

.journey-entry__visual > img {
  position: static;
  display: block;
  height: auto;
  aspect-ratio: 16 / 10;
}

.journey-entry__visual .journey-promise {
  position: static;
  max-width: none;
  padding: 1.25rem 1.5rem 1.6rem;
  background: var(--navy);
}

/* The email address breaks only after "@", never inside the domain. */
.journey-contact strong {
  overflow-wrap: normal;
}