/* A concise route from first enquiry to client onboarding. */
#client-journey-open[hidden] { display: none; }
.client-journey-action { display: flex; justify-content: center; margin-top: 32px; }
.client-journey-dialog { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--theme-bg); color: var(--theme-ink); overflow: hidden; }
.client-journey-dialog[open] { display: flex; flex-direction: column; }
.client-journey-dialog::backdrop { background: var(--theme-bg); }
.client-journey-dialog > .site-header { position: relative; top: auto; flex: none; width: 100%; }
.client-journey-content { position: relative; display: flex; flex: 1; flex-direction: column; align-self: center; width: 100%; min-height: 0; animation: client-journey-in .24s ease both; }
.client-journey-header { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; min-height: 39px; padding: 0 var(--page-end-gutter) 0 var(--page-gutter); border-bottom: 1px solid rgba(255, 255, 255, .15); background: rgba(39, 39, 39, .72); color: #f2f2f2; -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); }
.client-journey-header h2 { margin: 0; font: 400 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .095em; text-transform: uppercase; }
.client-journey-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--theme-line) transparent; padding: 63px var(--page-end-gutter) 28px var(--page-gutter); }
.client-journey-flow { max-width: 696px; margin-inline: auto; }
.client-journey-start-label { margin: 0 0 12px; color: var(--theme-muted); font: 600 10px/1.4 var(--font-body); letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.client-journey-starts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 22px; }
.client-journey-starts::after { position: absolute; right: 25%; bottom: 0; left: 25%; height: 22px; border-right: 1px solid var(--theme-line); border-bottom: 1px solid var(--theme-line); border-left: 1px solid var(--theme-line); content: ''; pointer-events: none; }
.client-journey-start { min-width: 0; padding: 16px 18px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-surface); color: var(--theme-ink); text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.client-journey-start:hover { border-color: var(--theme-accent); background: var(--theme-raised); }
.client-journey-start strong { display: block; margin-bottom: 5px; font: 600 14px/1.4 var(--font-body); }
.client-journey-start span { display: block; color: var(--theme-muted); font: 400 12px/1.5 var(--font-body); }
.client-journey-steps { position: relative; max-width: 500px; margin: 0 auto; padding: 22px 0 0; list-style: none; }
.client-journey-steps::before { position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid var(--theme-line); content: ''; }
.client-journey-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-surface); }
.client-journey-step:not(:last-child)::after { position: absolute; left: 50%; bottom: -23px; height: 22px; border-left: 1px solid var(--theme-line); content: ''; }
.client-journey-step:not(:last-child)::before { position: absolute; left: calc(50% - 3px); bottom: -22px; width: 6px; height: 6px; border-right: 1px solid var(--theme-line); border-bottom: 1px solid var(--theme-line); transform: rotate(45deg); content: ''; }
.client-journey-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--theme-line); border-radius: 50%; color: var(--theme-muted); font: 500 10px/1 var(--font-body); }
.client-journey-step h3 { margin: 0 0 4px; font: 600 14px/1.35 var(--font-body); letter-spacing: -.015em; }
.client-journey-step p { margin: 0; color: var(--theme-muted); font: 400 12px/1.5 var(--font-body); }
.client-journey-deliverables { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.client-journey-deliverables > li { max-width: 100%; padding: 4px 9px; border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-raised); color: var(--theme-ink); font: 500 10px/1.4 var(--font-body); overflow-wrap: anywhere; }
.client-journey-step:last-child { margin-bottom: 0; border-color: var(--theme-accent); }
.client-journey-step:last-child .client-journey-number { border-color: var(--theme-accent); background: var(--theme-accent); color: #fff; }
.client-journey-services { position: relative; max-width: 500px; margin: 0 auto; padding-top: 44px; }
.client-journey-services::before { position: absolute; top: 0; left: 50%; height: 44px; border-left: 1px solid var(--theme-line); content: ''; }
.client-journey-service-picker { position: relative; padding: 18px; border: 1px dashed var(--theme-line); border-radius: 10px; }
.client-journey-service-picker > h3 { margin: 0 0 6px; font: 600 16px/1.4 var(--font-body); letter-spacing: -.02em; }
.client-journey-service-picker > p, .client-journey-path-note { margin: 0; color: var(--theme-muted); font: 400 12px/1.6 var(--font-body); }
.client-journey-service-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.client-journey-service-choices button { min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-surface); color: var(--theme-ink); font: 500 11px/1.4 var(--font-body); text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.client-journey-service-choices button:hover { border-color: var(--theme-muted); background: var(--theme-raised); }
.client-journey-service-choices [data-journey-service="complete"] { grid-column: 1 / -1; }
.client-journey-service-choices button[aria-pressed="true"] { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-surface)); color: var(--theme-ink); font-weight: 600; }
.client-journey-path-note { position: relative; margin: 18px 0 0; text-align: center; }
.client-journey-service-path .client-journey-steps { padding-top: 18px; }
.client-journey-service-path .client-journey-steps::before { display: none; }
.client-journey-service-path .client-journey-scope-finish { background: var(--theme-bg); }
.client-journey-optional { position: relative; padding-top: 38px; text-align: center; }
.client-journey-optional::before { position: absolute; top: 0; left: 50%; height: 26px; border-left: 1px dashed var(--theme-line); content: ''; }
.client-journey-optional > h3 { margin: 0 0 6px; font: 600 14px/1.4 var(--font-body); }
.client-journey-optional > p { margin: 0; color: var(--theme-muted); font: 400 12px/1.6 var(--font-body); }
.client-journey-support-branches { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 30px 0 0; list-style: none; text-align: left; }
.client-journey-support-branches::before { position: absolute; top: 15px; right: 25%; left: 25%; height: 15px; border-top: 1px dashed var(--theme-line); border-right: 1px dashed var(--theme-line); border-left: 1px dashed var(--theme-line); content: ''; }
.client-journey-support-branches::after { position: absolute; top: 0; left: 50%; height: 15px; border-left: 1px dashed var(--theme-line); content: ''; }
.client-journey-support-branches > li { min-width: 0; padding: 16px; border: 1px dashed var(--theme-line); border-radius: 10px; background: var(--theme-surface); }
.client-journey-support-branches h3 { margin: 0 0 6px; font: 600 13px/1.4 var(--font-body); }
.client-journey-support-branches p { margin: 0; color: var(--theme-muted); font: 400 12px/1.5 var(--font-body); }
.client-journey-note { max-width: 500px; margin: 20px auto 0; color: var(--theme-muted); font: 400 12px/1.6 var(--font-body); text-align: center; }
.client-journey-dialog :is(a, button):focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 3px; }
html:has(.client-journey-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
@media (max-width: 600px) {
  .client-journey-action { margin-top: 24px; }
  .client-journey-action .workflow-button { width: 100%; }
  .client-journey-header { min-height: 36px; }
  .client-journey-header h2 { font-size: 9px; letter-spacing: .075em; }
  .client-journey-body { padding: 56px var(--page-end-gutter) 24px var(--page-gutter); }
  .client-journey-starts { gap: 10px; }
  .client-journey-start { padding: 13px 12px; }
  .client-journey-start strong { font-size: 12px; }
  .client-journey-start span { font-size: 11px; }
  .client-journey-step { padding: 14px; gap: 12px; }
}
@keyframes client-journey-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .client-journey-content { animation: none; }
  .client-journey-start, .client-journey-service-choices button { transition: none; }
}