/* ---------- how I work with you ---------- */
.how { padding-top: var(--s-8); }
.care { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); }
.care__head { position: sticky; top: 120px; align-self: start; }
.care__head h2 { margin-top: var(--s-4); font-size: calc(clamp(2.5rem, 1.2rem + 3.4vw, 4.75rem) * var(--display-scale)); }
.care__head p { margin: var(--s-5) 0 0; color: var(--muted); max-width: 32ch; }
@media (max-width: 900px) { .care { grid-template-columns: 1fr; gap: var(--s-7); } .care__head { position: static; } }

/* ---------- flow: Communication → Plan → Implement → Deliver ---------- */
.flow { display: grid; gap: var(--s-5); }
.flow__track { position: relative; }
.flow__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.flow__steps button { display: grid; justify-items: center; gap: var(--s-2); padding: 0 var(--s-2) var(--s-2); background: none; border: 0; cursor: pointer; color: var(--muted); font: inherit; text-align: center; transition: color var(--dur); }
.flow__steps button[aria-selected="true"] { color: var(--text); }
.flow__steps button:hover { color: var(--hover-light); }
.flow__steps button:hover .flow__dot { border-color: var(--hover-light); }
.flow__steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.flow__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transition: background var(--dur), border-color var(--dur), transform 420ms var(--ease-out); }
.flow__steps button.is-done .flow__dot { background: var(--accent); border-color: var(--accent); }
.flow__steps button[aria-selected="true"] .flow__dot { background: var(--caret); border-color: var(--accent); transform: scale(1.35); }
.flow__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-lg); line-height: 1; }
/* steps are centred in four equal columns, so the line runs from 12.5% to 87.5% (dot centres) */
.flow__bar { position: absolute; top: 8px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line); }
.flow__bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 700ms var(--ease-out); }

/* stage: one SVG scene per step */
.flow__stage { position: relative; aspect-ratio: 16 / 9; border: var(--rule); background: var(--surface); overflow: hidden; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateX(var(--from, 6%)); transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-out); }
.flow__stage[data-dir="back"] .scene { --from: -6%; }
.scene.is-active { opacity: 1; transform: none; }
.s-ink { fill: var(--text); } .s-navy { fill: var(--accent); } .s-soft { fill: var(--surface-2); } .s-mute { fill: var(--muted); opacity: .55; }
.s-paper { fill: var(--bg); } .s-gold { fill: var(--caret); } .s-line { fill: var(--line); }
.k-ink, .k-navy, .k-gold, .k-paper { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.k-ink { stroke: var(--text); } .k-navy { stroke: var(--accent); } .k-gold { stroke: var(--caret); } .k-paper { stroke: var(--bg); }
.k-ink.thin { stroke-width: 2; } .k-ink.fat { stroke-width: 6; }
rect.k-ink { stroke-width: 2; fill: var(--bg); }
/* scene parts start hidden and play only while their scene is active, so every visit replays */
.scene .pop, .scene .rise { opacity: 0; transform-box: fill-box; transform-origin: left center; }
.scene .pop--r { transform-origin: right center; } .scene .pop--c { transform-origin: center; }
.scene .grow { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.scene .draw { stroke-dasharray: 60; stroke-dashoffset: 60; }
.scene .typing, .scene .caret { opacity: 0; }
.scene.is-active .pop { animation: pop 460ms var(--ease-out) var(--d, 0s) forwards; }
.scene.is-active .rise { animation: rise 520ms var(--ease-out) var(--d, 0s) forwards; }
.scene.is-active .grow { animation: grow 520ms var(--ease-out) var(--d, 0s) forwards; }
.scene.is-active .grow--slow { animation-duration: 2.6s; }
.scene.is-active .draw { animation: draw 420ms var(--ease-out) var(--d, 0s) forwards; }
.scene.is-active .typing { animation: typing 820ms linear var(--d, 0s) forwards; }
.scene.is-active .typing circle { animation: bounce 600ms ease-in-out infinite; transform-box: fill-box; }
.scene.is-active .typing circle:nth-child(3) { animation-delay: .1s; } .scene.is-active .typing circle:nth-child(4) { animation-delay: .2s; }
.scene.is-active .caret { animation: blink 1s steps(1) var(--d, 0s) infinite; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes typing { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bounce { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .scene .pop, .scene .rise, .scene .caret { opacity: 1; } .scene .grow { transform: none; } .scene .draw { stroke-dashoffset: 0; } .scene .typing { display: none; }
}

/* step copy + controls */
.flow__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-7); }
.flow__copy { flex: 1 1 340px; }
.flow__copy h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-xl); line-height: 1; }
.flow__copy p { margin: 0; color: var(--muted); max-width: 52ch; }
.flow__copy .promise { display: inline-block; margin-top: var(--s-3); color: var(--accent-ink); }
.flow__ctrl { display: flex; align-items: center; gap: var(--s-4); flex: none; margin-left: auto; }
.flow__count b { color: var(--text); }
.flow__btn { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; width: 48px; height: 48px; background: none; border: var(--rule); cursor: pointer; color: var(--text); transition: color 380ms var(--ease-out), border-color 380ms var(--ease-out); }
.flow__btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hover-light); transform: scaleX(0); transform-origin: right; transition: transform 380ms var(--ease-out); }
.flow__btn:hover, .flow__btn:focus-visible { color: var(--on-hover-light); border-color: var(--hover-light); }
.flow__btn:hover::before, .flow__btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.flow__btn[data-dir="-1"] .icon { transform: scaleX(-1); }

@media (max-width: 640px) { .flow__name { font-size: var(--fs-sm); } .flow__steps .caps { display: none; } }