/* October 15: small, independent hero entrances. No cursor or layout changes. */
.create-letter{animation:createLetter .01s steps(1,end) both;animation-delay:calc(.55s + var(--letter)*.13s)}
@keyframes createLetter{from{opacity:0}to{opacity:1}}
.portrait-label{transform-origin:46% 5px;animation:noteArrival .85s 1.05s cubic-bezier(.2,.7,.25,1) both}
@keyframes noteArrival{
 0%{opacity:0;transform:translateY(22px) rotate(-10deg) scale(.96)}
 58%{opacity:1;transform:translateY(-3px) rotate(11deg) scale(1)}
 80%{transform:translateY(1px) rotate(5deg)}
 100%{opacity:1;transform:translateY(0) rotate(7deg)}
}

/* Tiny embedded previews remain visible until the smaller card images decode. */
.category-image,.project-image{background-color:#e7ede5;background-size:cover;background-position:center}
.work-restored .category-card,.work-restored .project-card{animation:none}

/* Seven equal tool frames; fill transparent Canva corners with its brand colours. */
.tool-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.tool-canva{background:linear-gradient(145deg,#05bec7 15%,#168fd5 47%,#7430fa 85%)}
@media(max-width:750px){
 .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .tool-item:last-child{grid-column:2}
}

/* Compact client stories, with full logos and legible descriptions. */
.clients-grid{gap:20px;margin-top:35px}
.client{padding:12px 12px 22px}
.client .client-logo{height:96px;min-height:0;margin-bottom:18px;padding:14px}
.client .client-logo.bari{padding:10px}
.client .small-label{font-size:11px;line-height:1.5;letter-spacing:.5px}
.client h3{font-size:21px;margin:8px 0 12px}
.client p{font-size:15px;line-height:1.65;margin-bottom:20px}
.client .text-link{font-size:15px}
@media(max-width:750px){
 .clients-grid{grid-template-columns:1fr;gap:16px}
 .client{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:17px;row-gap:6px;padding:19px;align-items:center}
 .client .client-logo{grid-column:1;grid-row:1 / 3;width:100%;height:78px;margin:0;padding:10px}
 .client .client-logo.bari{padding:6px}
 .client .small-label{grid-column:2;align-self:end;padding:0;font-size:10px}
 .client h3{grid-column:2;align-self:start;padding:0;margin:0;font-size:21px;line-height:1.25}
 .client p{grid-column:1 / -1;padding:0;margin:10px 0 6px;font-size:15px;line-height:1.7}
 .client .text-link{grid-column:1 / -1;justify-self:start;margin:0;padding:0}
}
@media(min-width:1051px) and (hover:hover) and (pointer:fine){
 .motion-ready .fan-stage.reveal.is-visible{animation:none}
}
@media(prefers-reduced-motion:reduce){
 .create-letter,.portrait-label{animation:none;opacity:1}
}