/* A manual, progressively enhanced story. Without JavaScript every step stays readable. */
.process-story { --story-green: #345447; --story-sage: #e2eae4; --story-ivory: #f6f3ec; --story-line: #b9c8bc; color: #294438; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.process-story *, .process-story *::before, .process-story *::after { box-sizing: border-box; }
.process-story-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--story-line); }
.process-story-tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 20px 16px 20px 0; min-height: 72px; text-decoration: none; color: #4d6253; font-size: 18px; line-height: 1.3; font-weight: 500; }
.process-story-index { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--story-line); border-radius: 10px; font-size: 14px; font-variant-numeric: tabular-nums; transition: color 160ms, background-color 160ms, border-color 160ms; }
.process-story-tab::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 24px; height: 2px; background: var(--story-green); transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.process-story-tab:hover { color: var(--story-green); }
.process-story-tab:hover .process-story-index { border-color: var(--story-green); }
.process-story-tab:focus-visible { outline: 3px solid var(--story-green); outline-offset: 5px; border-radius: 14px; }
.process-story-tab[aria-selected="true"] { color: var(--story-green); font-weight: 600; }
.process-story-tab[aria-selected="true"]::after { transform: scaleX(1); }
.process-story-tab[aria-selected="true"] .process-story-index { color: var(--story-ivory); background: var(--story-green); border-color: var(--story-green); }
.process-story-stage { margin-top: 32px; border-radius: 20px; background: var(--story-ivory); overflow: hidden; }
.process-story-panel { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 56px; min-height: 358px; padding: 40px; scroll-margin-top: 24px; }
.process-story-panel + .process-story-panel { border-top: 1px solid var(--story-line); }
.process-story-enhanced .process-story-panel { border: 0; }
.process-story-panel[hidden] { display: none !important; }
.process-story-copy { min-width: 0; }
.process-story-copy h3 { max-width: 12ch; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; margin: 0 0 20px; }
.process-story-copy p { max-width: 33ch; margin: 0; color: #4d6253; font-size: 19px; line-height: 1.55; }
.process-story-art { min-width: 0; color: var(--story-green); }
.process-story-art-title { margin: 0 0 24px; font-size: 23px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
.process-story-consultation { position: relative; padding-right: 40px; }
.process-story-note { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 20px; padding-block: 14px; border-top: 1px solid var(--story-line); font-size: 16px; }
.process-story-note i { height: 2px; background: #7d9585; transform-origin: left; }
.process-story-note:nth-child(3) i { width: 82%; }
.process-story-note:nth-child(4) i { width: 61%; }
.process-story svg.process-story-annotation { position: absolute; width: 100px !important; height: 100px !important; right: -20px; bottom: -24px; fill: none !important; stroke: var(--story-green); stroke-width: 1.6; }
.process-story svg.process-story-shelf-drawing { display: block; width: 100% !important; height: auto !important; fill: none !important; stroke: var(--story-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.process-story-shelf-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 10px; }
.process-story-shelf-labels p { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
.process-story-shelf-labels strong { display: block; padding: 5px 12px; border-radius: 7px; background: var(--story-sage); text-transform: uppercase; font-size: 14px; letter-spacing: .04em; font-weight: 600; }
.process-story-shelf-labels .process-story-review { background: #e7dfd1; color: #65513b; }
.process-story-routine { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.process-story-routine-page { padding: 8px 24px 8px 0; }
.process-story-routine-page + .process-story-routine-page { border-left: 1px solid var(--story-line); padding-left: 28px; padding-right: 0; }
.process-story-routine-page > strong { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.process-story-routine-order { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 18px 16px; padding-block: 28px; }
.process-story-routine-order span { display: grid; place-items: center; border: 1px solid #8fa495; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; }
.process-story-routine-order i { display: block; height: 6px; background: #99ad9d; border-radius: 2px; transform-origin: left; }
.process-story-routine-order i:last-child { width: 70%; }
.process-story-routine-page p { margin: 0; font-size: 15px; line-height: 1.5; }
.process-story-check-ins { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.process-story-check-ins > div { display: flex; flex-direction: column; gap: 12px; }
.process-story-check-ins strong { font-size: 32px; line-height: 1.1; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.process-story-check-ins span { font-size: 14px; line-height: 1.4; }
.process-story svg.process-story-check-ins, .process-story-check-ins svg { flex: 1; width: 60px !important; height: 24px !important; margin-top: 7px; fill: none !important; stroke: var(--story-green); stroke-width: 1.4; }
.process-story-reply { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--story-line); display: flex; flex-direction: column; gap: 8px; }
.process-story-reply span { font-size: 15px; }
.process-story-reply strong { font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 1000px) {
  .process-story-tab { gap: 9px; font-size: 16px; }
  .process-story-panel { padding: 32px; gap: 32px; }
  .process-story-copy p { font-size: 18px; }
  .process-story-check-ins strong { font-size: 26px; }
  .process-story-routine-page { padding-right: 16px; }
  .process-story-routine-page + .process-story-routine-page { padding-left: 16px; }
}
@media (max-width: 700px) {
  .process-story-nav { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .process-story-tab { min-height: 64px; padding-block: 14px; font-size: 16px; }
  .process-story-tab::after { right: 0; }
  .process-story-stage { margin-top: 24px; }
  .process-story-panel { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px; min-height: 486px; align-content: start; }
  .process-story-copy h3 { max-width: none; font-size: 30px; margin-bottom: 14px; }
  .process-story-copy p { max-width: 43ch; font-size: 18px; }
  .process-story-art { width: min(100%, 440px); margin-inline: auto; }
  .process-story-consultation { padding-right: 16px; padding-bottom: 24px; }
  .process-story-art-title { font-size: 21px; }
  .process-story-note { grid-template-columns: 90px 1fr; font-size: 15px; }
  .process-story svg.process-story-annotation { right: -10px; bottom: -7px; width: 80px !important; height: 80px !important; }
  .process-story-routine-page > strong { font-size: 22px; }
  .process-story-check-ins strong { font-size: 28px; }
}
@media (max-width: 380px) {
  .process-story-nav { column-gap: 10px; }
  .process-story-tab { gap: 7px; font-size: 15px; padding-right: 0; }
  .process-story-index { width: 28px; height: 28px; border-radius: 8px; }
  .process-story-panel { padding-inline: 20px; gap: 28px; }
  .process-story-copy h3 { font-size: 28px; }
  .process-story-check-ins { gap: 10px; }
  .process-story-check-ins strong { font-size: 25px; }
  .process-story-check-ins span, .process-story-shelf-labels p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-story-tab::after, .process-story-index { transition-duration: 0s; }
}