/* Shared editorial system for every full case-study page. */
.workflow-page {
  --case-section-space: clamp(90px, 12vw, 170px);
  --case-block-space: clamp(70px, 9vw, 130px);
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}

.workflow-page .workflow-hero,
.workflow-page .workflow-content,
.workflow-page .principle,
.workflow-page .screen-gallery,
.workflow-page .case-chapters,
.workflow-page .case-outcomes article,
.workflow-page .tradeup-action,
.workflow-page .tradeup-gallery,
.workflow-page .project-snapshot,
.workflow-page .brand-logic,
.workflow-page .public-reference {
  padding-left: var(--case-gutter);
  padding-right: var(--case-gutter);
}

.workflow-page .external-product-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font: 500 12px/1.4 "DM Mono", monospace;
  letter-spacing: .07em;
  transition: color .22s ease, border-color .22s ease;
}

.workflow-page .external-product-link:hover,
.workflow-page .external-product-link:focus-visible {
  color: #49a85d;
  border-color: #49a85d;
}

.workflow-page .case-navigation {
  padding: clamp(65px, 8vw, 110px) var(--case-gutter);
  border-top: 1px solid var(--case-line);
  background: #000;
  color: #fff;
}

.workflow-page .case-navigation a {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
}

.workflow-page .case-navigation span {
  flex: 0 0 100%;
  font: 500 11px/1.4 "DM Mono", monospace;
  letter-spacing: .07em;
  opacity: .62;
}

.workflow-page .case-navigation strong {
  font-size: clamp(2.5rem, 7vw, 7rem);
  line-height: .88;
  letter-spacing: 1px;
}

.workflow-page .case-navigation b {
  margin-left: 2px;
  font: 400 clamp(2rem, 4vw, 4rem)/1 "DM Mono", monospace;
  transition: color .22s ease, transform .22s ease;
}

.workflow-page .case-navigation a:hover b,
.workflow-page .case-navigation a:focus-visible b {
  color: #49a85d;
  transform: translateX(5px);
}

.workflow-page .workflow-hero {
  padding-top: clamp(100px, 13vw, 190px);
  padding-bottom: clamp(70px, 9vw, 130px);
}

.workflow-page .workflow-hero h1,
.workflow-page h2 {
  letter-spacing: 1px !important;
  word-spacing: 10px;
  text-align: left;
}

.workflow-page .workflow-lead,
.workflow-page .case-intro {
  width: min(610px, 100%);
  max-width: 610px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.workflow-page .workflow-content,
.workflow-page .case-chapters,
.workflow-page .tradeup-action,
.workflow-page .tradeup-gallery,
.workflow-page .project-snapshot,
.workflow-page .brand-logic,
.workflow-page .public-reference {
  padding-top: var(--case-section-space);
  padding-bottom: var(--case-section-space);
}

.workflow-page .workflow-content article,
.workflow-page .case-chapter {
  padding-top: 35px;
  padding-bottom: var(--case-block-space);
}

/* Editorial articles use one predictable vertical reading column at every width. */
.workflow-page .workflow-content,
.workflow-page .case-chapter,
.workflow-page .project-snapshot,
.workflow-page .brand-logic,
.workflow-page .public-reference,
.workflow-page .action-copy,
.workflow-page .screen-gallery,
.workflow-page .tradeup-gallery,
.workflow-page .tradeup-gallery header {
  grid-template-columns: minmax(0, 1fr);
}

.workflow-page .workflow-content article,
.workflow-page .workflow-content article:nth-child(odd) {
  padding-left: 0;
  padding-right: 0;
  border-right: 0;
}

.workflow-page .case-chapter.reverse .chapter-copy,
.workflow-page .case-chapter.reverse .screen-slot {
  order: initial;
}

.workflow-page .screen-gallery-head,
.workflow-page .tradeup-gallery header,
.workflow-page .tradeup-screen,
.workflow-page .tradeup-screen.wide,
.workflow-page .youcontrol-gallery .screen-card {
  grid-column: 1;
}

.workflow-page .action-copy h2,
.workflow-page .action-copy > p:last-child {
  grid-column: 1;
}

.workflow-page .action-steps,
.workflow-page .logic-columns,
.workflow-page .paired-needs,
.workflow-page .result-tags {
  grid-template-columns: minmax(0, 1fr);
}

.workflow-page .action-steps li,
.workflow-page .action-steps li:nth-child(3) {
  min-height: 0;
  border-left: 1px solid var(--case-line);
  border-bottom: 1px solid var(--case-line);
}

.workflow-page .action-steps b {
  margin-top: 35px;
}

.workflow-page .result-tags span {
  border-right: 0;
  border-bottom: 1px solid var(--case-line);
}

.workflow-page .result-tags span:last-child {
  border-bottom: 0;
}

.workflow-page :is(.workflow-content, .case-chapter, .project-snapshot, .brand-logic, .public-reference, .action-copy, .tradeup-gallery header, .case-outcomes article) :is(.case-label, h2, p, ul, dl) {
  text-align: left;
}

.workflow-page :is(.workflow-content article, .chapter-copy, .project-snapshot > div, .brand-logic > div, .public-reference > div, .action-copy, .case-outcomes article) > p:not(.case-label) {
  max-width: 590px;
  font-size: 17px;
  line-height: 1.6;
}

.workflow-page .workflow-image img,
.workflow-page .tradeup-screen img,
.workflow-page .tradeup-screen.wide img {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 700px) {
  .workflow-page {
    --case-gutter: 22px;
    --case-section-space: 78px;
    --case-block-space: 58px;
  }

  .workflow-page .workflow-content,
  .workflow-page .case-chapter,
  .workflow-page .project-snapshot,
  .workflow-page .brand-logic,
  .workflow-page .public-reference,
  .workflow-page .action-copy,
  .workflow-page .tradeup-gallery header {
    grid-template-columns: 1fr;
  }

  .workflow-page .workflow-content article,
  .workflow-page .workflow-content article:nth-child(odd) {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }
}