.work-title { grid-template-columns: 1fr; padding-bottom: var(--space-block); }
.work-title .lede { margin-top: var(--measure-lg); }

.work-circle { position: relative; display: inline-block; color: var(--color-ink); }
.work-circle svg {
  position: absolute; left: -14px; top: -10px; width: calc(100% + 28px); height: calc(100% + 20px);
  overflow: visible; pointer-events: none;
}
.work-circle path { fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; }

.work-board { border-block: 1px solid var(--color-line); }

.case-study { padding-block: var(--space-layout); border-bottom: 1.5px dashed var(--color-muted); }
.case-study:last-child { border-bottom: 0; }

.case-study__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--measure-2xl); margin-bottom: var(--measure-3xl); }
.case-study__head .cluster { --cluster-gap: var(--measure-xs); }
.case-study__head h2 { margin-top: var(--measure-md); }
.case-study__who { margin-top: var(--measure-xs); font-size: var(--text-lg); color: var(--color-muted); }

.case-study__photo { width: 300px; margin: 0; }
.case-study:hover .case-study__photo { rotate: calc(-1 * var(--tilt-sm)); box-shadow: var(--shadow-print-lift); }
.case-study__frame { container-type: inline-size; overflow: hidden; border: 1px solid var(--color-line); border-radius: 2px; background: var(--color-tint); }
.case-study__frame img { width: 100%; height: auto; max-height: 62.5cqi; object-fit: cover; object-position: 50% 0; transition: object-position 1.4s var(--ease); }
.case-study:hover .case-study__frame img { object-position: 50% 15%; }
.case-study__photo figcaption { margin-top: var(--measure-xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }

.case-study__flow { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
.case-study__step { display: flex; flex-direction: column; gap: var(--measure-sm); padding: var(--measure-2xl); }
.case-study__step p { font-size: var(--text-md); line-height: var(--leading-normal); }
.case-study__label {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: 0.06em; line-height: var(--leading-snug);
  text-transform: uppercase; color: var(--color-muted);
}
.case-study__step--problem .case-study__label { color: var(--color-ink); }
.case-study__step--result .case-study__label { color: var(--color-dark-muted); }
.case-study__step--result ul { list-style: none; display: grid; gap: var(--measure-sm); }
.case-study__step--result strong { display: block; font-size: var(--text-3xl); letter-spacing: var(--tracking-numeral); line-height: var(--leading-none); color: var(--color-accent); }
.case-study__step--result span { display: block; margin-top: var(--measure-2xs); font-size: var(--text-sm); color: var(--color-dark-muted); }

.case-study__arrow { display: grid; place-items: center; color: var(--color-primary); }
.case-study__arrow svg { width: 56px; height: 40px; overflow: visible; }
.case-study__arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }

.case-study__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--measure-lg); margin-top: var(--measure-3xl); }
.case-study__foot .btn { margin-left: auto; }
.case-study__quote { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--measure-2xs) var(--measure-sm); max-width: 720px; margin: 0; font-size: var(--text-md); }
.case-study__quote img { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--radius-round); object-fit: cover; }
.case-study__quote blockquote { margin: 0; }
.case-study__quote figcaption { font-size: var(--text-sm); color: var(--color-muted); }

@keyframes doodle-draw { from { stroke-dashoffset: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .work-circle path { animation: doodle-draw 1.1s 0.7s cubic-bezier(0.6, 0, 0.2, 1) both; }

  @supports (animation-timeline: view()) {
    .case-study__arrow path { animation: doodle-draw linear both; animation-timeline: view(); animation-range: cover 0% cover 25%; }
  }

  .case-study__arrow.is-revealed path { animation: doodle-draw 0.9s 0.2s var(--ease) both; }
}

@media (max-width: 1000px) {
  .case-study__flow { grid-template-columns: minmax(0, 1fr); }
  .case-study__arrow { height: 56px; }
  .case-study__arrow svg { rotate: 90deg; }
  .case-study__photo { width: 240px; }
}

@media (max-width: 640px) {
  .case-study { padding-block: var(--space-block); }
  .case-study__step--problem, .case-study__step--result { rotate: none; }
  .case-study__photo { margin-inline: auto; }
  .case-study__foot .btn { margin-left: 0; }
}