/* Content sets the band height. Without motion or JavaScript, the drawings and thread are complete. */
.work-journey-opening { display: grid; gap: 1.75rem; padding-block: 2.5rem 3rem; }
.work-journey-opening h1 { max-width: 16ch; font-size: clamp(3rem, 6vw, 6rem); line-height: 1.02; }
.work-journey-opening .hero-intro { margin: 0 0 1.5rem; max-width: 33ch; font-size: 1.1rem; }
.work-journey { --journey-edge: max(1rem, calc((100vw - var(--max))/2)); --journey-gutter: 1.5rem; position: relative; }
.journey-track { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--journey-edge); width: 2px; background: var(--line); pointer-events: none; }
.journey-track span { display: block; height: 100%; background: var(--accent); transform: scaleY(1); transform-origin: top; }
.journey-motion .journey-track span { transform: scaleY(var(--journey-progress, 0)); }
.journey-steps { list-style: none; margin: 0; padding: 0; }
.journey-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 1.1rem .75rem; padding: 2rem var(--journey-edge) 2rem calc(var(--journey-edge) + var(--journey-gutter)); border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.journey-copy { display: contents; }
.journey-heading { grid-column: 1; grid-row: 1; align-self: center; }
.journey-number { position: relative; z-index: 3; display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.journey-number::before { content: ''; position: absolute; top: .22rem; left: calc(-1 * var(--journey-gutter) - 4px); width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; background: var(--paper); }
.journey-step h2 { max-width: 20ch; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.06; }
.journey-text { grid-column: 1 / -1; grid-row: 2; max-width: 66ch; font-size: 1rem; line-height: 1.6; color: #4c4d49; }
.journey-text p { margin: 0 0 1rem; }
.journey-text > :last-child { margin-bottom: 0; }
.journey-text ul { margin: .9rem 0 1rem; padding-left: 1.2rem; color: var(--ink); }
.journey-text li { padding-left: .15rem; margin-block: .35rem; }
.journey-text li::marker { color: var(--accent); }
.journey-visual { grid-column: 2; grid-row: 1; width: 100%; margin: 0; align-self: center; }
.journey-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.journey-visual figcaption { margin-top: .25rem; text-align: center; font-size: .57rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.motif-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.motif-soft { fill: #eeebe4; }
.motif-paper { fill: var(--paper); }
.motif-accent { stroke: var(--accent); }
.motif-fill { fill: var(--accent); }
.motif-detail { opacity: .5; }
.motif-check { stroke: white; stroke-width: 5; }
.journey-approval { background: var(--charcoal); color: var(--paper); border-top: 0; }
.journey-approval .journey-number { color: white; }
.journey-approval .journey-number::before { background: var(--charcoal); }
.journey-approval .journey-text, .journey-approval figcaption { color: #d7d8d1; }
.journey-approval .journey-text ul { color: var(--paper); }
.journey-approval .journey-text li::marker { color: #f06469; }
.journey-approval .journey-agreement { padding-top: 1rem; border-top: 2px solid #ed545c; color: var(--paper); font-weight: 650; }
.journey-approval .motif-soft { fill: #30342f; }
.journey-approval .motif-paper { fill: #202220; }
.work-journey-page .customer-note { padding-block: 3rem; border-top: 0; }
.work-journey-page .customer-note figure { max-width: 58rem; }
.journey-number .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 761px) {
 .work-journey-opening { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 7vw; padding-block: 4rem 5rem; }
 .work-journey-opening h1 { max-width: 15ch; }
 .work-journey-opening > div:last-child { padding-bottom: .4rem; }
 .work-journey { --journey-gutter: 2.5rem; }
 .journey-step { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: 2.5rem; }
 .journey-copy { display: block; grid-column: 1; grid-row: 1; }
 .journey-heading { margin-bottom: 1.25rem; }
 .journey-number { margin-bottom: .8rem; }
 .journey-visual { width: min(100%, 27rem); justify-self: center; }
 .journey-visual figcaption { margin-top: .65rem; font-size: .7rem; letter-spacing: .12em; }
 .work-journey-page .customer-note { padding-block: 4rem; }
}
@media (max-width: 359px) {
 .journey-step { grid-template-columns: minmax(0, 1fr) 6rem; gap: 1rem .5rem; }
 .journey-step h2 { font-size: 2rem; }
}
/* Step drawings play at 0.55 of their authored timing: about 1.0s per step instead of 1.75 to 1.9s (2026-10-07). */
.work-journey { --journey-speed: .55; }
@media (prefers-reduced-motion: no-preference) {
 .journey-motion .journey-step:not(.is-complete) [data-motion="draw"] { stroke-dasharray: 1; stroke-dashoffset: 1; }
 .journey-motion .journey-step:not(.is-complete) [data-motion="rise"],
 .journey-motion .journey-step:not(.is-complete) [data-motion="wall"],
 .journey-motion .journey-step:not(.is-complete) [data-motion="stamp"] { opacity: 0; }
 .journey-motion .journey-step.is-running [data-motion] { animation-duration: calc(var(--duration, .5s) * var(--journey-speed)); animation-delay: calc(var(--delay, 0s) * var(--journey-speed)); animation-timing-function: cubic-bezier(.2,.7,.2,1); animation-fill-mode: both; }
 .journey-motion .journey-step.is-running [data-motion="draw"] { animation-name: journey-draw; }
 .journey-motion .journey-step.is-running [data-motion="rise"] { animation-name: journey-rise; }
 .journey-motion .journey-step.is-running [data-motion="wall"] { animation-name: journey-wall; }
 .journey-motion .journey-step.is-running [data-motion="stamp"] { animation-name: journey-stamp; transform-box: fill-box; transform-origin: center; }
 @keyframes journey-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
 @keyframes journey-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes journey-wall { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes journey-stamp { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
 .journey-track span { transform: scaleY(1) !important; }
 .journey-step [data-motion] { animation: none !important; transition: none !important; transform: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
 .journey-step [data-motion="rise"], .journey-step [data-motion="wall"], .journey-step [data-motion="stamp"] { opacity: 1 !important; }
}

@media (max-width: 760px) { .journey-visual .motif-line { vector-effect: non-scaling-stroke; stroke-width: 1; } .journey-visual .motif-check { stroke-width: 2; } }

/* How we work, phone widths: the first step card starts inside the opening screen as the scroll cue.
   The H1 matches the service pages' phone size; wording unchanged. Desktop untouched. */
@media (max-width: 600px) {
 .work-journey-opening { gap: 1.1rem; padding-block: 1.5rem 1.5rem; }
 .work-journey-opening h1 { font-size: 2.8rem; line-height: 1.04; }
 .work-journey-opening .hero-intro { margin-bottom: 1rem; }
}