/* Selected work lives inside the existing JustinOS window frame. */
.desktop-intro .intro-role { margin-top: 7px; font-size: 11px; line-height: 1.5; color: #b2bfc4; }
.desktop-intro .intro-work { display: inline-block; margin-top: 10px; color: #f3d9b4; font-size: 12px; font-weight: 600; border-bottom: 1px solid #f3d9b477; padding: 3px 0; }
.desktop-intro .intro-work:hover { color: #fff; border-color: #fff; }
.intro-work:focus-visible { outline: 2px solid #f3d9b4; outline-offset: 5px; }
.work-intro { margin: 8px 0 24px; }
.work-eyebrow { display: block; font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #706956; }
.win-body .work-intro h2 { font-size: clamp(28px, 4vw, 38px); line-height: 1.12; max-width: 22ch; margin: 10px 0 14px; }
.work-intro > p:last-child { color: #5d5d57; font-size: 15px; line-height: 1.65; max-width: 62ch; }
.work-list { border-top: 1px solid #e8e5dd; }
.work-item { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid #e8e5dd; color: #24241f; }
.work-item:hover { color: #24241f; }
.work-item:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.work-item:focus-visible, .work-case a:focus-visible, .work-footer a:focus-visible { outline: 2px solid #9b7434; outline-offset: 5px; border-radius: 2px; }
.work-number { font: 12px/1.6 'SFMono-Regular', Consolas, monospace; color: #938b79; }
.win-body .work-item h3 { margin: 5px 0 8px; font-size: 21px; line-height: 1.25; color: #26251e; }
.work-item p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: #62625a; }
.work-item .work-proof { color: #3e4939; font-size: 12px; font-weight: 600; }
.work-action, .work-back, .work-footer a { color: #6c542d; font-size: 12px; font-weight: 600; }
.work-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 6px; color: #6b6b63; font-size: 12px; }
.work-back { display: inline-block; padding: 4px 0; margin-bottom: 14px; }
.case-context { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; border-block: 1px solid #e8e5dd; padding: 18px 0; margin: 0; }
.case-context dt { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #706956; margin-bottom: 6px; }
.case-context dd { margin: 0; color: #55564e; font-size: 13px; line-height: 1.6; }
.case-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid #e8e5dd; }
.case-results strong { display: block; font-size: clamp(22px, 4vw, 30px); font-weight: 650; letter-spacing: -.03em; color: #353c30; }
.case-results span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.5; color: #696a61; }
.case-section { margin-top: 30px; }
.win-body .case-section h3 { margin: 0 0 12px; font-size: 20px; color: #292a25; }
.case-section p { color: #55564e; font-size: 14px; line-height: 1.75; margin: 10px 0; }
.case-decisions { padding-left: 22px; }
.case-decisions li { padding-left: 7px; margin-top: 20px; color: #837354; }
.case-decisions h4 { margin: 0; color: #34352e; font-size: 15px; line-height: 1.5; }
.case-decisions p { margin-top: 6px; }
.case-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; margin: 0; padding: 20px; border-radius: 10px; background: #f5f4ee; }
.case-flow strong { display: block; color: #35382d; font-size: 13px; margin-bottom: 6px; }
.case-flow span { font-size: 12px; line-height: 1.6; color: #686a5e; }
.case-flow .flow-arrow { align-self: center; color: #9a987f; }
.case-flow figcaption { grid-column: 1 / -1; font-size: 10px; color: #747568; line-height: 1.6; padding-top: 12px; border-top: 1px solid #e2e1d5; }
.case-outcome { padding-bottom: 20px; border-bottom: 1px solid #e8e5dd; }
.receipts-index { display: flex; justify-content: center; margin-bottom: 16px; font-size: 12px; }
.about-current { margin-bottom: 24px; padding: 18px 0; border-block: 1px solid #e8e5dd; }
.about-current h3 { margin: 0 0 8px; font-size: 16px; }
.about-current p { color: #5e6059; font-size: 13px; line-height: 1.65; margin: 0 0 10px; }
.about-current a { font-size: 12px; }
@media (max-width: 719px) {
  .case-context { grid-template-columns: 1fr; gap: 14px; }
  .case-results { gap: 12px; }
  .work-item { gap: 10px; grid-template-columns: 24px 1fr; }
  .case-flow { grid-template-columns: 1fr; gap: 10px; }
  .case-flow .flow-arrow { transform: rotate(90deg); justify-self: start; }
  .desktop-intro .intro-role { max-width: 48ch; }
}
@media (max-height: 500px) {
  .desktop-intro .intro-role { display: none; }
  .desktop-intro .intro-work { margin-top: 3px; }
}