/* Block 2 only. Inherit the site's fonts, section spacing and container. */
.recognition-block { background: var(--white); }
.recognition-heading,
.recognition-closing { max-width: 790px; margin-inline: auto; }
.brief-home .recognition-heading h2 { max-width: 32ch; margin-bottom: 18px; }
.brief-home .recognition-heading .story-subtitle {
  max-width: 60ch;
  margin: 0;
  color: var(--navy);
  font: 400 1.25rem/1.6 var(--font-body);
}
.recognition-quote { max-width: 60ch; margin: 24px 0 0; }
.brief-home .recognition-quote blockquote {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink-soft);
  font: 400 .9375rem/1.6 var(--font-body);
}
.recognition-quote figcaption { margin-top: 4px; color: var(--ink-soft); font-size: .875rem; }
.recognition-work {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: start;
  gap: 0;
  max-width: 1160px;
  margin: 32px 0 40px;
  padding: 32px 40px;
  background: var(--white);
  border: 1px solid rgb(var(--navy-rgb) / .18);
  border-radius: 10px;
}
.recognition-work > .output-correction {
  position: relative;
  padding: 60px 0 0 48px;
}
/* The canvas owns the scene. The illustration crosses the grid seam without
   obscuring live text. Keep the original raster and its paper stack intact. */
.recognition-illustration { height: 580px; width: calc(100% + 60px); min-width: 0; }
.recognition-illustration picture { display: block; height: 100%; }
.recognition-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% center;
}
.recognition-rework,
.recognition-payoff p { max-width: 65ch; }
.recognition-payoff { margin-top: 88px; }
.brief-home .recognition-payoff h3 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.25;
  margin: 0 0 20px;
}
@media (max-width: 1050px) {
  .recognition-work { padding: 28px; }
  .recognition-illustration { height: 500px; width: calc(100% + 40px); }
  .recognition-illustration img { object-position: 17% center; }
  .recognition-work > .output-correction { padding: 48px 0 0 32px; }
}
@media (max-width: 860px) {
  .recognition-work { padding: 24px; }
  .recognition-work > .output-correction { padding: 32px 0 0 28px; }
  .recognition-illustration { height: 430px; }
}
@media (max-width: 650px) {
  .brief-home .recognition-heading .story-subtitle { font-size: 1.125rem; }
  .recognition-quote { margin-top: 20px; }
  .recognition-work { grid-template-columns: 1fr; gap: 0; margin: 24px 0 40px; padding: 24px 20px; }
  .recognition-work > .output-correction { padding: 0; }
  .recognition-illustration { width: min(280px, 100%); height: 340px; justify-self: center; }
  .recognition-illustration img { object-position: 22% center; }
  .recognition-payoff { margin-top: 64px; }
}
@media (max-width: 380px) {
  .recognition-work { padding-inline: 16px; }
}
/* The correction remains visible without animation in either motion mode. */
@media (prefers-reduced-motion: reduce) {
  .recognition-block { scroll-behavior: auto; }
}

.recognition-next { margin-top: 32px; }
.recognition-next .brief-link { max-width: 100%; }
.recognition-next .brief-link svg { flex-shrink: 0; }
.brief-home .recognition-next p { margin-top: 10px; font-size: .9375rem; color: var(--ink-soft); }