/* Local layout for the continuous process page. */
.process-page { overflow-wrap: anywhere; }
.process-hero { padding-block: clamp(2rem, 4vw, 3.5rem) 1.75rem; }
.process-eyebrow { display: flex; align-items: center; gap: 1rem; color: var(--lasea-forest); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: .8125rem; }
.process-eyebrow::before { content: ""; width: 2rem; height: 2px; background: var(--lasea-leaf-dark); flex: 0 0 auto; }
.process-hero h1 { max-width: 32ch; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1.2 var(--font-display); color: var(--lasea-forest-dark); margin: 1rem 0; }
.process-hero > p:last-child { max-width: 70ch; line-height: 1.7; color: var(--lasea-ink-soft); }
.process-groups { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.process-group {
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: 2rem;
  border-top: 1px solid var(--lasea-line);
}
.process-group:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 310px); }
.process-group:nth-child(even) .process-group__media { grid-column: 2; grid-row: 1; }
.process-group:nth-child(even) .process-group__steps { grid-column: 1; grid-row: 1; }
.process-group__media { width: 100%; max-width: 310px; aspect-ratio: 310 / 510; justify-self: center; }
.process-group__media > img { width: 100%; height: auto; aspect-ratio: 310 / 510; object-fit: cover; border-radius: 14px; }
.process-photo-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; text-align: center; background: var(--lasea-mint); border-radius: 14px; color: var(--lasea-ink-soft); }
.process-photo-placeholder span { font-weight: 600; color: var(--lasea-forest); }
.process-photo-placeholder p { font-size: .875rem; line-height: 1.6; }
.process-group__steps { min-width: 0; }
.process-step {
  --marker-size: 54px;
  position: relative;
  display: grid;
  grid-template-columns: var(--marker-size) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 0 0 1.75rem;
}
.process-step:last-child { padding-bottom: 0; }
.process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--marker-size) / 2 - 1px);
  top: var(--marker-size);
  bottom: 0;
  border-left: 2px dotted var(--lasea-leaf-dark);
}
.process-step__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  background: var(--lasea-forest);
}

.process-step__icon { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.process-step h2 { font: 600 clamp(1.2rem, 1.7vw, 1.5rem)/1.3 var(--font-display); color: var(--lasea-forest-dark); margin: .15rem 0 .65rem; }
.process-step p { max-width: 77ch; margin: 0; line-height: 1.7; color: var(--lasea-ink-soft); }
.process-route-note { padding-top: 1.25rem; border-top: 1px solid var(--lasea-line); color: var(--lasea-ink-soft); font-size: .875rem; line-height: 1.65; max-width: 95ch; }
.process-page .reveal { transition-duration: .35s; }
.process-skip { position: fixed; top: .5rem; left: 1rem; z-index: 200; padding: .75rem; background: white; color: var(--lasea-forest); transform: translateY(-200%); }
.process-skip:focus { transform: none; outline: 3px solid var(--lasea-forest); outline-offset: 3px; }
.process-fallback { padding-block: 1rem; }
.process-fallback a:focus-visible { outline: 3px solid var(--lasea-forest); outline-offset: 4px; }
@media (max-width: 768px) {
  .process-group, .process-group:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .process-group:nth-child(even) .process-group__media,
  .process-group:nth-child(even) .process-group__steps { grid-column: auto; grid-row: auto; }
  .process-group__media { max-width: 260px; }
}
@media (max-width: 600px) {
  .process-page .container { padding-inline: 1rem; }
  .process-step { --marker-size: 44px; gap: .85rem; }
  .process-step__icon { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .process-page .reveal { transition: none; }
}