/* Warm, editorial motion: each section enters as it reaches the viewport. */
.motion-pending{opacity:0;transform:translateY(28px)}
.section-intro h2{position:relative}
.section-intro h2::after{content:"";display:block;width:84px;height:4px;margin-top:16px;background:var(--link);transform:scaleX(0);transform-origin:left;opacity:.9}
.section-intro h2.motion-visited::after{animation:section-heading-rule .7s cubic-bezier(.2,.7,.2,1) .18s both}
@media(prefers-reduced-motion:no-preference){
.motion-visited{animation:section-enter .72s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--motion-step,0)*85ms)}
.section-intro h2.motion-visited::after{animation:section-heading-rule .7s cubic-bezier(.2,.7,.2,1) .18s both}
@keyframes section-enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes section-heading-rule{to{transform:scaleX(1)}}
}
@media(prefers-reduced-motion:reduce){.motion-pending{opacity:1;transform:none}.section-intro h2::after{transform:scaleX(1)}}

/* Small tactile responses give the sections a shared interaction language. */
.help-row,.process-node,.working-steps li::before,.project-summary h3>span:last-child,.project-row::before,.nexus-section .workflow-stepper li,.contact-primary svg{transition:transform .32s cubic-bezier(.2,.75,.2,1),color .32s ease,box-shadow .32s ease,opacity .32s ease}
@media(hover:hover){
.help-row:hover .service-icon svg{transform:translateY(-4px) rotate(-7deg)}
.process-path li:hover .process-node{transform:translateY(-4px) rotate(6deg);box-shadow:0 8px 18px rgba(36,55,92,.15)}
.working-steps li:hover::before{transform:translateX(6px);color:var(--link)}
.project-row:hover .project-summary h3>span:last-child{transform:translateX(5px)}
.project-row:hover::before{opacity:1;transform:scaleX(1)}
.nexus-section .workflow-stepper li:hover{transform:translateX(5px);color:var(--link)}
.contact-primary:hover svg{transform:translate(5px,-4px)}
}

/* Section-specific accents retain their established palette. */
.help-row,.career-timeline>div{position:relative}
.help-row::after,.career-timeline>div::after{content:"";position:absolute;top:-1px;left:0;width:76px;height:2px;background:currentColor;opacity:0;pointer-events:none}
.help-row::after{color:#415d45}
.career-timeline>div::after{color:#274a8f;width:48px}
@media(prefers-reduced-motion:no-preference){
.motion-visited.help-row::after,.career-timeline>div.motion-visited::after{animation:section-rule 1.3s cubic-bezier(.16,1,.3,1) both}
.motion-visited .service-icon svg{animation:service-ink 1.1s ease-out}
.process-path li.motion-visited .process-node{animation:process-acknowledge 1.4s ease-out;animation-delay:calc(var(--step, 4)*.2s)}
@keyframes section-rule{0%{transform:scaleX(0);transform-origin:left;opacity:0}20%{opacity:.8}75%{opacity:.8}100%{transform:scaleX(1);transform-origin:left;opacity:.55}}
@keyframes service-ink{0%{stroke-dasharray:60;stroke-dashoffset:60;color:#6e866e}100%{stroke-dasharray:60;stroke-dashoffset:0;color:#415d45}}
@keyframes process-acknowledge{0%,100%{background:#bfcce5;color:#264075}35%,65%{background:#264075;color:#eef3fe}}
}

@media(max-width:700px){.process-path li.motion-visited .process-node{animation-delay:0s}}

/* Client identities take focus once; descriptions never move. */
.project-row::before{content:"";position:absolute;top:-1px;left:0;width:112px;height:2px;background:#93b2ef;pointer-events:none;opacity:0}
@media(prefers-reduced-motion:no-preference){
.project-row.client-visited::before{animation:client-rule 1.2s cubic-bezier(.16,1,.3,1) both}
.project-link svg{transition:transform .2s ease-out}
.project-link:hover svg,.project-link:focus-visible svg{transform:translate(3px,-3px)}
.project-link[href^="#"]:hover svg,.project-link[href^="#"]:focus-visible svg{transform:translateY(3px)}
@keyframes client-rule{from{transform:scaleX(0);transform-origin:left;opacity:.2}to{transform:scaleX(1);transform-origin:left;opacity:.8}}
}

/* Client stories unfold as a short visual sequence; keep the logos still. */
@media(prefers-reduced-motion:no-preference){
.project-more[open] .client-journey li{animation:client-step-in .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--step,0)*120ms)}
.project-more[open] .client-journey li:nth-child(1){--step:0}
.project-more[open] .client-journey li:nth-child(2){--step:1}
.project-more[open] .client-journey li:nth-child(3){--step:2}
.project-more[open] .client-journey li:not(:last-child)::after{transform:scaleX(0);transform-origin:left;animation:client-connector-in .45s ease-out .28s both}
@keyframes client-step-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes client-connector-in{to{transform:scaleX(1)}}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
.project-more[open] .client-journey li:not(:last-child)::after{transform:scaleY(0);transform-origin:top;animation:client-connector-mobile-in .45s ease-out .28s both}
@keyframes client-connector-mobile-in{to{transform:scaleY(1)}}
}

/* Client stories as a before -> built -> result strip: short chips instead of paragraphs. */
.story-flow .impact-journey small{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.story-flow .flow-chips{margin:4px 0 0;max-width:none;display:flex;flex-wrap:wrap;gap:6px}
.story-flow .flow-chips span{display:inline-block;position:relative;font-size:13px;line-height:1.35;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);color:var(--text)}
.story-flow .impact-journey li:first-child .flow-chips span{color:var(--muted);background:transparent;border-style:dashed}
.story-flow .impact-journey li:first-child .flow-chips span::after{content:"";position:absolute;left:8px;right:8px;top:52%;height:1.5px;background:#c0564b;border-radius:2px}
[data-project="fayda"] .story-flow .impact-journey li:first-child .flow-chips span::after{content:none}
.story-flow .impact-journey li:last-child .flow-chips span{background:#e7f1ea;border-color:#b9d3c1;color:var(--success);font-weight:500}
.story-flow>.project-impact{grid-row:auto;grid-column:auto}
.story-flow .impact-journey .impact-stats{display:flex;flex-wrap:wrap;margin:12px 0 0;padding:0;border:0;gap:8px 22px}.story-flow .impact-stats>div{display:grid;gap:2px}.story-flow .impact-journey .impact-stats strong{font-size:20px;color:var(--success)}.story-flow .impact-journey .impact-stats span{display:block;font-size:13px}
.impact-drop del{color:var(--muted);font-weight:500;text-decoration-color:#c0564b;text-decoration-thickness:2px}.impact-drop i{font-style:normal;color:var(--muted);margin:0 8px;font-weight:400}
/* The build column carries most tags, so it gets the most room; side columns stay compact. */
@media(min-width:701px){.work-section .story-flow .impact-journey{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);gap:36px}}
@media(max-width:700px){
.story-flow .impact-journey small{display:none}
.story-flow .impact-journey li>.flow-chips,.story-flow .impact-journey li>.impact-stats{grid-column:2}
}

/* On open: each stage rises in turn, its chips pop in, the old way is struck out, then the numbers land. */
@media(prefers-reduced-motion:no-preference){
.project-more[open] .story-flow .client-journey li{animation-delay:calc(var(--step,0)*.7s)}
.project-more[open] .story-flow .client-journey li:not(:last-child)::after{animation-delay:calc(var(--step,0)*.7s + .45s)}
.project-more[open] .story-flow .flow-chips span{animation:flow-chip-in .4s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--step,0)*.7s + .25s + var(--i,0)*60ms)}
.project-more[open] .story-flow .client-journey li:first-child .flow-chips span::after{transform:scaleX(0);transform-origin:left;animation:flow-strike .35s ease-out both;animation-delay:calc(.75s + var(--i,0)*90ms)}
.project-more[open] .story-flow .client-journey li:last-child .impact-symbol{animation:flow-pop .5s cubic-bezier(.34,1.6,.64,1) 1.5s both}
.project-more[open] .story-flow .impact-stats,.project-more[open] .story-flow .impact-caption{animation:client-step-in .5s ease-out 2s both}
.flow-chips span:nth-child(2){--i:1}.flow-chips span:nth-child(3){--i:2}.flow-chips span:nth-child(4){--i:3}.flow-chips span:nth-child(5){--i:4}
.flow-chips span:nth-child(6){--i:5}.flow-chips span:nth-child(7){--i:6}.flow-chips span:nth-child(8){--i:7}.flow-chips span:nth-child(9){--i:8}.flow-chips span:nth-child(10){--i:9}
@keyframes flow-chip-in{from{opacity:0;transform:scale(.8) translateY(6px)}to{opacity:1;transform:none}}
@keyframes flow-strike{to{transform:scaleX(1)}}
@keyframes flow-pop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
}