/* Full-bleed project artwork, with the same low-left hierarchy as the other cases. */
.case-hero--workful { background: #373180; justify-content: flex-end; }
.case-hero--workful::before { background: linear-gradient(90deg, #373180 0%, rgb(55 49 128 / .94) 25%, transparent 66%); }
.workful-opening { display: contents; }
.case-hero--workful .case-hero__content,
.case-hero--workful .case-hero__meta { width: 49%; max-width: 720px; }
.case-hero--workful .case-hero__title { font-size: clamp(76px, 10vw, 166px); }
.case-hero--workful .case-hero__thesis { max-width: 26ch; }
.workful-art.case-hero__media { left: 40%; top: -12%; width: 76%; height: 112%; display: flex; align-items: center; }
.workful-art svg { display: block; flex: none; width: 100%; height: auto; overflow: visible; font-family: var(--bv-font-sans); letter-spacing: -.8px; }
.wf-piece { opacity: 0; transform: translateY(32px); }
.is-loaded .wf-piece { animation: wf-settle 1.4s var(--ease-out) forwards; }
.is-loaded .wf-piece--one { animation-delay: .15s; }
.is-loaded .wf-piece--two { animation-delay: .4s; }
.is-loaded .wf-piece--three { animation-delay: .7s; }
.is-loaded .wf-piece--four { animation-delay: .95s; }
.wf-routes path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-loaded .wf-routes path { animation: wf-connect 1.7s var(--ease-out) .55s forwards; }
.is-loaded .wf-routes path:nth-child(2) { animation-delay: .85s; }
.is-loaded .wf-routes path:nth-child(3) { animation-delay: 1.1s; }
@keyframes wf-settle { to { opacity: 1; transform: translateY(0); } }
@keyframes wf-connect { to { stroke-dashoffset: 0; } }
@media (max-width: 900px) {
 .case-hero--workful { display: flex; gap: 32px; padding-top: 300px; }
 .case-hero--workful .case-hero__content,
 .case-hero--workful .case-hero__meta { width: 100%; max-width: none; }
 .case-hero--workful .case-hero__content { grid-area: auto; }
 .case-hero--workful .case-hero__meta { margin-top: 0; }
 .case-hero--workful .case-hero__title { font-size: clamp(66px, 14vw, 116px); }
 .workful-art.case-hero__media { top: -10%; left: 14%; width: 115%; height: 72%; align-items: flex-start; opacity: .85; }
 .case-hero--workful::before { background: linear-gradient(0deg, #373180 18%, rgb(55 49 128 / .96) 32%, rgb(55 49 128 / .1) 70%); }
 .case-hero--workful::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
 .wf-piece { opacity: 1; transform: none; }
 .is-loaded .wf-piece, .is-loaded .wf-routes path { animation: none; }
 .wf-routes path { stroke-dashoffset: 0; }
}
.workful-art.case-hero__media { left: 34%; top: -8%; width: 70%; }
@media (max-width: 900px) {
 .workful-art.case-hero__media { top: 76px; left: 3%; width: 105%; }
}
/* A project-specific identity spread within the shared exhibit rhythm. */
.wf-specimen { display: grid; grid-template-columns: 1fr 1fr; background: #FFFEFA; color: #29262D; }
.wf-specimen__wordmark { min-height: clamp(280px, 32vw, 470px); display: flex; align-content: center; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 40px 24px; }
.wf-specimen__wordmark img { width: clamp(62px, 7vw, 110px); height: auto; }
.wf-specimen__wordmark strong { font-size: clamp(46px, 6.4vw, 96px); font-weight: 700; letter-spacing: -.065em; }
.wf-specimen__wordmark > span { flex-basis: 100%; text-align: center; font-size: clamp(16px, 1.7vw, 24px); margin-top: 20px; color: #726B76; }
.wf-specimen__type { background: #6863F6; color: #FFFEFA; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 4vw, 64px); }
.wf-specimen__label { font-size: clamp(20px, 2.8vw, 42px); letter-spacing: -.04em; line-height: 1.1; max-width: 16ch; }
.wf-specimen__type svg { width: 100%; margin-top: 40px; }
.wf-swatches { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
.wf-swatches > div { padding: clamp(18px, 2.5vw, 38px); min-height: clamp(140px, 15vw, 220px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; transition: padding 450ms var(--ease-out); }
.wf-swatches > div:nth-child(1) { background: #F04C78; }
.wf-swatches > div:nth-child(2) { background: #FFBE26; }
.wf-swatches > div:nth-child(3) { background: #76C961; }
.wf-swatches > div:nth-child(4) { background: #6863F6; color: #FFFEFA; }
.wf-swatches span { font-family: var(--bv-font-mono); font-size: clamp(9px, .85vw, 12px); text-transform: uppercase; letter-spacing: .04em; }
.wf-swatches strong { font-size: clamp(24px, 3vw, 44px); letter-spacing: -.045em; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .wf-swatches > div:hover { padding-bottom: 48px; } }
@media (max-width: 640px) {
 .wf-specimen { grid-template-columns: 1fr; }
 .wf-specimen__wordmark { min-height: 270px; }
 .wf-specimen__type { min-height: 270px; }
 .wf-swatches { grid-template-columns: 1fr 1fr; }
 .wf-swatches > div { min-height: 150px; }
}