/* V6 GRID SYSTEM
   Six primary columns, each divisible in two. Every page uses this frame.
   Vignelli Canon, pp. 40–52, 80–84: shared image/type alignment, a limited
   set of spans, content-led image proportions, and deliberate sequence.
   Spacing in 8px increments; 24px column gutters; explicit reading measures. */
body.v6 {
  --v6-grid-max: 1200px;
  --v6-grid-edge: clamp(24px, 3.75vw, 64px);
  --v6-grid-width: min(calc(100% - var(--v6-grid-edge) * 2), var(--v6-grid-max));
  --v6-grid-gap: 24px;
  --v6-grid-columns: repeat(12, minmax(0, 1fr));
  --v6-grid-unit: 8px;
  --v6-section-space: 96px;
  --v6-page-top: 160px;
  --v6-chrome-band: 120px;
  --v6-sec-gap: var(--v6-section-space);
}
body.v6 .v6-page,
body.v6 .v6-intro,
body.v6 .v6-reel,
body.v6 .v6-more,
body.v6 .v6-career,
body.v6 footer.v6-end {
  width: var(--v6-grid-width);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}
/* The fixed navigation uses the same twelve columns as the page beneath it. */
body.v6 .v6-chrome {
  padding: 32px max(var(--v6-grid-edge), calc((100% - var(--v6-grid-max)) / 2));
  grid-template-columns: var(--v6-grid-columns);
  grid-template-rows: auto 1fr;
  column-gap: var(--v6-grid-gap);
}
body.v6 .v6-chrome .v6-nav--l { grid-column: 1 / 4; grid-row: 1; justify-self: start; margin: 0; }
body.v6 .v6-chrome .v6-mark { grid-column: 5 / 9; grid-row: 1; justify-self: center; }
body.v6 .v6-chrome .v6-nav--r { grid-column: 10 / 13; grid-row: 1; justify-self: end; margin: 0; }

/* Home and Work: the same gallery, with the resting image on a column edge.
   Two spare columns at either side leave room for the existing hover orbit. */
body.v6 .v6-intro {
  display: grid; grid-template-columns: var(--v6-grid-columns);
  gap: 16px var(--v6-grid-gap); place-items: start;
  min-height: 0; padding-block: var(--v6-page-top) 48px;
}
body.v6 .v6-intro .v6-opening { grid-column: 1 / 9; margin: 0; max-width: none; text-align: left; }
body.v6 .v6-intro .v6-intro-ways { grid-column: 1 / 9; margin: 0; text-align: left; }
body.v6 .v6-reel { padding-block: 0; }
body.v6 .v6-stage,
body.v6 .v6-reel .v6-stage:first-child {
  display: grid; grid-template-columns: var(--v6-grid-columns);
  gap: 0 var(--v6-grid-gap); place-items: start;
  min-height: 0; padding: 48px 0 96px; box-sizing: border-box;
}
body.v6 .v6-stage[data-col="l"], body.v6 .v6-stage[data-col="r"] { padding-inline: 0; }
body.v6 .v6-stage .v6-plate { width: 100%; max-width: none; grid-column: 5 / 9; }
body.v6 .v6-stage[data-col="l"] .v6-plate { grid-column: 3 / 7; }
body.v6 .v6-stage[data-col="r"] .v6-plate { grid-column: 7 / 11; }
body.v6 .v6-plate-logo { justify-content: center; margin: 24px 0 0; }
body.v6 .v6-plate-meta { text-align: center; margin-top: 8px; }
body.v6 .v6-more { padding-block: 0 48px; }

/* Text pages: the heading, opening spread, sections, and footer share columns. */
body.v6 .v6-mast-wrap {
  display: grid; grid-template-columns: var(--v6-grid-columns);
  gap: 32px var(--v6-grid-gap); align-items: end;
  padding-block: var(--v6-page-top) 48px;
}
body.v6 .v6-mast { grid-column: 1 / 9; max-width: none; font-size: clamp(40px, 5vw, 72px); line-height: 1.08; }
body.v6 .v6-mast-wrap .v6-contact-now { grid-column: 10 / 13; margin: 0; gap: 16px; }
body.v6 .v6-page > .v6-display { width: calc((100% - var(--v6-grid-gap)) / 2); max-width: none; margin: 0; }
body.v6 .v6-about-intro {
  display: grid; grid-template-columns: var(--v6-grid-columns);
  gap: 32px var(--v6-grid-gap); align-items: start;
}
body.v6 .v6-about-intro > .v6-display { grid-column: 1 / 7; max-width: none; margin: 0; }
body.v6 .v6-about-intro > p { font-size: 20px; line-height: 30px; font-weight: 400; }
body.v6 .v6-about-intro > .v6-lede--intro { grid-column: 7 / 13; max-width: none; margin: 0; }
body.v6 .v6-about > .v6-sec {
  display: grid; grid-template-columns: var(--v6-grid-columns);
  width: auto; margin: var(--v6-section-space) 0 0;
  gap: 16px var(--v6-grid-gap);
}
body.v6 .v6-about > .v6-sec > .v6-label,
body.v6 .v6-about > .v6-sec > div { grid-column: 1 / 7; padding-top: 0; }
body.v6 .v6-about > .v6-sec:nth-of-type(odd) > .v6-label,
body.v6 .v6-about > .v6-sec:nth-of-type(odd) > div { grid-column: 7 / 13; }
body.v6 .v6-about .v6-h { max-width: none; margin-bottom: 24px; font-size: 36px; line-height: 40px; }
body.v6 .v6-lede { max-width: none; font-size: 18px; line-height: 28px; }
body.v6 .v6-lede + .v6-lede { margin-top: 24px; }
body.v6 .v6-about > .v6-sec > .v6-demos,
body.v6 .v6-about > .v6-sec:nth-of-type(odd) > .v6-demos {
  grid-column: 1 / -1; display: grid; grid-template-columns: var(--v6-grid-columns);
  gap: 32px var(--v6-grid-gap); max-width: none; margin-top: 32px;
}
body.v6 .v6-demos .v6-demo { grid-column: span 6; min-width: 0; }
body.v6 .v6-demo__row { margin-top: 16px; }
body.v6 .v6-page-end, body.v6 .v6-about > .v6-page-end {
  display: grid; grid-template-columns: var(--v6-grid-columns);
  gap: 24px var(--v6-grid-gap); width: auto; margin: var(--v6-section-space) 0 0;
  padding: 32px 0 64px; border-top: 1px solid var(--v4-line);
}
body.v6 .v6-page-end > .v6-closing { grid-column: 1 / 7; max-width: none; margin: 0; }
body.v6 .v6-page-end > .v6-cta { grid-column: 10 / 13; justify-self: start; align-self: start; }
body.v6 .v6-contact .v6-mast-wrap .v6-contact-now { grid-column: 9 / 13; }
body.v6 .v6-contact > .v6-display { margin-left: calc((100% + var(--v6-grid-gap)) / 2); }

/* Career: dates / employer / role use 2 / 4 / 6 of the same columns. */
body.v6 .v6-career { padding-block: 48px 64px; }
body.v6 .v6-career > .v6-label { margin-bottom: 16px; }
body.v6 .v6-career > .v6-lede { width: calc((100% - var(--v6-grid-gap)) / 2); max-width: none; margin-bottom: 48px; }
body.v6 .v6-career-list li { grid-template-columns: var(--v6-grid-columns); gap: var(--v6-grid-gap); padding-block: 24px; }
body.v6 .v6-career__when { grid-column: 1 / 3; font-variant-numeric: tabular-nums; }
body.v6 .v6-career__who { grid-column: 3 / 7; }
body.v6 .v6-career__detail { grid-column: 7 / 13; }
body.v6 footer.v6-end { display: grid; grid-template-columns: var(--v6-grid-columns); gap: 24px var(--v6-grid-gap); padding-block: 32px 64px; }
body.v6 footer.v6-end .v6-closing { grid-column: 1 / 7; max-width: none; margin: 0; font-size: 24px; line-height: 32px; }
body.v6 footer.v6-end > .v6-cta { grid-column: 10 / 13; justify-self: start; align-self: start; }
body.v6 footer.v6-end > .v6-small { grid-column: 1 / 7; margin: 0; max-width: none; }

/* Cases: full-width images, six-column pairs, six-column reading measure.
   Nothing is independently centered by an unrelated max-width. */
body.v6 .v6-page.v6-case { width: var(--v6-grid-width); --case-width: var(--v6-grid-max); --case-gap: var(--v6-section-space); }
body.v6 .v6-case > .v6-case-head,
body.v6 .v6-case > .v6-case-hero,
body.v6 .v6-case > .v6-case-media,
body.v6 .v6-case > .v6-case-facts,
body.v6 .v6-case > .v6-case-end { width: 100%; max-width: none; margin-inline: 0; }
body.v6 .v6-case-head { display: grid; grid-template-columns: var(--v6-grid-columns); gap: 24px var(--v6-grid-gap); align-items: start; padding-block: var(--v6-page-top) 48px; }
body.v6 .v6-case-title { grid-column: 1 / 9; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.12; }
body.v6 .v6-case-credit { grid-column: 9 / 13; margin: 0; font-size: 14px; line-height: 24px; display: block; }
body.v6 .v6-case-status { display: block; margin-top: 8px; }
body.v6 .v6-case-sub { margin-top: 16px; font-size: 20px; line-height: 28px; }
body.v6 .v6-case-text {
  width: auto; display: grid; grid-template-columns: var(--v6-grid-columns);
  column-gap: var(--v6-grid-gap); margin: var(--v6-section-space) 0;
}
body.v6 .v6-case-text > * { grid-column: 4 / 10; min-width: 0; max-width: none; }
body.v6 .v6-case-text p { font-size: 18px; line-height: 28px; margin-bottom: 24px; }
body.v6 .v6-case-open { font-size: 32px; line-height: 40px; }
body.v6 .v6-case-text .v6-case-pair { grid-column: 1 / -1; }
body.v6 .v6-case-facts { grid-template-columns: var(--v6-grid-columns); gap: 24px var(--v6-grid-gap); padding-top: 24px; margin-bottom: var(--v6-section-space); }
body.v6 .v6-case-facts > div { grid-column: span 3; min-width: 0; }
body.v6 .v6-case-facts dt { margin-bottom: 16px; }
body.v6 .v6-case-facts dd { font-size: 16px; line-height: 24px; }
body.v6 .v6-case-media { grid-template-columns: var(--v6-grid-columns); gap: 48px var(--v6-grid-gap); }
body.v6 .v6-case-media [data-cell="full"] { grid-column: 1 / -1; }
body.v6 .v6-case-media [data-cell="half"] { grid-column: span 6; }
body.v6 .v6-case-media [data-cell="portrait"] { grid-column: 4 / 10; }
body.v6 .v6-case-media [data-cell] > img { width: 100%; max-height: none; }
body.v6 .v6-case-pair { gap: var(--v6-grid-gap); }
body.v6 .v6-cap { max-width: none; margin-top: 16px; font-size: 14px; line-height: 24px; }
body.v6 .v6-case-end { margin-block: var(--v6-section-space) 64px; padding-top: 24px; }
body.v6 .v6-case-pagination { grid-template-columns: var(--v6-grid-columns); gap: var(--v6-grid-gap); }
body.v6 .v6-case-prev { grid-column: 1 / 7; }
body.v6 .v6-case-next { grid-column: 7 / 13; align-items: flex-start; text-align: left; }
body.v6 .v6-case-footer-links { display: grid; grid-template-columns: var(--v6-grid-columns); gap: var(--v6-grid-gap); padding-top: 24px; margin-top: 24px; }
body.v6 .v6-case-footer-links > a:first-child { grid-column: 1 / 7; }
body.v6 .v6-case-footer-links > a:last-child { grid-column: 7 / 13; }

@media (max-width: 899px) {
  body.v6 { --v6-grid-columns: repeat(6, minmax(0, 1fr)); --v6-section-space: 64px; --v6-page-top: 144px; }
  body.v6 .v6-chrome .v6-nav--l { grid-column: 1; }
  body.v6 .v6-chrome .v6-mark { grid-column: 2 / 6; }
  body.v6 .v6-chrome .v6-nav--r { grid-column: 6; }
  body.v6 .v6-intro .v6-opening, body.v6 .v6-intro .v6-intro-ways { grid-column: 1 / -1; }
  body.v6 .v6-stage .v6-plate, body.v6 .v6-stage[data-col="l"] .v6-plate, body.v6 .v6-stage[data-col="r"] .v6-plate { grid-column: 2 / 6; }
  body.v6 .v6-stage, body.v6 .v6-reel .v6-stage:first-child { padding-block: 32px 64px; }
  body.v6 .v6-mast { grid-column: 1 / -1; }
  body.v6 .v6-mast-wrap .v6-contact-now, body.v6 .v6-contact .v6-mast-wrap .v6-contact-now { grid-column: 1 / -1; }
  body.v6 .v6-about-intro > .v6-display { grid-column: 1 / -1; }
  body.v6 .v6-about-intro > .v6-lede--intro { grid-column: 2 / -1; }
  body.v6 .v6-about > .v6-sec > .v6-label, body.v6 .v6-about > .v6-sec > div { grid-column: 1 / 6; }
  body.v6 .v6-about > .v6-sec:nth-of-type(odd) > .v6-label, body.v6 .v6-about > .v6-sec:nth-of-type(odd) > div { grid-column: 2 / 7; }
  body.v6 .v6-about > .v6-sec > .v6-demos,
body.v6 .v6-about > .v6-sec:nth-of-type(odd) > .v6-demos { grid-column: 1 / -1; }
  body.v6 .v6-demos .v6-demo { grid-column: span 3; }
  body.v6 .v6-page-end > .v6-closing, body.v6 footer.v6-end .v6-closing { grid-column: 1 / 5; }
  body.v6 .v6-page-end > .v6-cta, body.v6 footer.v6-end > .v6-cta { grid-column: 5 / 7; }
  body.v6 footer.v6-end > .v6-small { grid-column: 1 / -1; }
  body.v6 .v6-page > .v6-display { width: 100%; }
  body.v6 .v6-contact > .v6-display { margin-left: 0; }
  body.v6 .v6-career > .v6-lede { width: 100%; }
  body.v6 .v6-career__when { grid-column: 1 / 3; grid-row: 1; }
  body.v6 .v6-career__who { grid-column: 3 / 7; grid-row: 1; }
  body.v6 .v6-career__detail { grid-column: 3 / 7; }
  body.v6 .v6-case-title, body.v6 .v6-case-credit { grid-column: 1 / -1; }
  body.v6 .v6-case-text > * { grid-column: 2 / 6; }
  body.v6 .v6-case-facts > div { grid-column: span 3; }
  body.v6 .v6-case-media [data-cell="half"] { grid-column: span 3; }
  body.v6 .v6-case-media [data-cell="portrait"] { grid-column: 2 / 6; }
  body.v6 .v6-case-prev, body.v6 .v6-case-footer-links > a:first-child { grid-column: 1 / 4; }
  body.v6 .v6-case-next, body.v6 .v6-case-footer-links > a:last-child { grid-column: 4 / 7; }
}
@media (max-width: 599px) {
  body.v6 { --v6-grid-columns: repeat(4, minmax(0, 1fr)); --v6-grid-gap: 16px; --v6-grid-edge: 24px; --v6-section-space: 56px; --v6-page-top: 144px; }
  body.v6 .v6-chrome { padding-block: 24px; row-gap: 8px; grid-template-rows: auto auto 1fr; }
  body.v6 .v6-chrome .v6-mark { grid-column: 1 / -1; justify-self: start; text-align: left; }
  body.v6 .v6-chrome .v6-nav--l { grid-row: 2; grid-column: 1 / 3; }
  body.v6 .v6-chrome .v6-nav--r { grid-row: 2; grid-column: 3 / 5; }
  body.v6 .v6-intro { padding-bottom: 32px; }
  body.v6 .v6-stage .v6-plate, body.v6 .v6-stage[data-col="l"] .v6-plate, body.v6 .v6-stage[data-col="r"] .v6-plate { grid-column: 1 / -1; }
  body.v6 .v6-stage, body.v6 .v6-reel .v6-stage:first-child { padding-block: 24px 48px; }
  body.v6 .v6-mast-wrap { padding-bottom: 32px; }
  body.v6 .v6-about-intro > .v6-lede--intro,
  body.v6 .v6-about > .v6-sec > .v6-label, body.v6 .v6-about > .v6-sec > div,
  body.v6 .v6-about > .v6-sec:nth-of-type(odd) > .v6-label, body.v6 .v6-about > .v6-sec:nth-of-type(odd) > div,
  body.v6 .v6-demos .v6-demo,
  body.v6 .v6-page-end > .v6-closing, body.v6 .v6-page-end > .v6-cta,
  body.v6 footer.v6-end .v6-closing, body.v6 footer.v6-end > .v6-cta,
  body.v6 .v6-case-text > *, body.v6 .v6-case-media [data-cell],
  body.v6 .v6-case-text .v6-case-pair { grid-column: 1 / -1; }
  body.v6 .v6-about .v6-h { font-size: 32px; line-height: 36px; }
  body.v6 .v6-about-intro > p { font-size: 18px; line-height: 28px; }
  body.v6 .v6-lede, body.v6 .v6-case-text p { font-size: 17px; line-height: 28px; }
  body.v6 .v6-career__who { grid-column: 1 / 3; }
  body.v6 .v6-career__when { grid-column: 3 / 5; justify-self: end; }
  body.v6 .v6-career__detail { grid-column: 1 / -1; }
  body.v6 .v6-case-facts > div { grid-column: span 2; }
  body.v6 .v6-case-prev, body.v6 .v6-case-footer-links > a:first-child { grid-column: 1 / 3; }
  body.v6 .v6-case-next, body.v6 .v6-case-footer-links > a:last-child { grid-column: 3 / 5; }
  body.v6 .v6-case-media { row-gap: 32px; }
  body.v6 .v6-case-pair { grid-template-columns: 1fr; }
  body.v6 .v6-cap-link { white-space: normal; }
}

/* The tailored PAKA page inherits the same screen frame; its print sheet is independent. */
body.v6.v6-paka-page .v6-paka-hero,
body.v6.v6-paka-page .v6-paka-hero-ways,
body.v6.v6-paka-page .v6-paka-sechead,
body.v6.v6-paka-page .v6-paka-career,
body.v6.v6-paka-page .v6-paka-dl,
body.v6.v6-paka-page .v6-case-media,
body.v6.v6-paka-page .v6-case-facts { width: 100%; max-width: none; padding-inline: 0; margin-inline: 0; box-sizing: border-box; }
body.v6.v6-paka-page .v6-paka-hero { padding-top: var(--v6-page-top); }
body.v6.v6-paka-page .v6-paka-sec { margin-top: var(--v6-section-space); }
body.v6.v6-paka-page .v6-paka-sechead { margin-bottom: 32px; }
body.v6.v6-paka-page .v6-paka-career li { grid-template-columns: var(--v6-grid-columns); }
body.v6.v6-paka-page .v6-paka-career .v6-career__what { grid-column: 7 / 13; }
body.v6.v6-paka-page .v6-case-text { width: 100%; margin-block: 32px 48px; }
body.v6.v6-paka-page .v6-case-text p { font-size: 18px; line-height: 28px; }
body.v6.v6-paka-page .v6-case-media [data-cell] > img { width: 100%; max-height: none; }
body.v6.v6-paka-page .v6-case-media [data-cell="third"] { grid-column: span 4; }
body.v6.v6-paka-page .v6-case-media { row-gap: 48px; margin-bottom: 48px; }
body.v6.v6-paka-page .v6-case-facts { margin-bottom: 48px; }
@media (max-width: 899px) {
  body.v6.v6-paka-page .v6-paka-career .v6-career__what { grid-column: 3 / 7; }
  body.v6.v6-paka-page .v6-case-media [data-cell="third"] { grid-column: span 2; }
}
@media (max-width: 599px) {
  body.v6.v6-paka-page .v6-paka-career .v6-career__what { grid-column: 1 / -1; }
  body.v6.v6-paka-page .v6-case-media [data-cell="third"] { grid-column: 1 / -1; }
}

/* One optical logo system for project plates and employer rows. The inner image
   retains its source aspect ratio; this window removes only empty asset padding. */
body.v6 .v6-plate-logo { height: 48px; align-items: center; }
body.v6 .v6-career__who { min-height: 48px; }
body.v6 .v6-logo-mark { display: block; position: relative; overflow: hidden; flex: 0 0 auto; }
body.v6 .v6-logo-mark img { position: absolute; display: block; max-width: none; max-height: none; margin: 0; }
body.v6 .v6-plate-logo img { opacity: 1; }
@media (max-width: 599px) {
  body.v6 .v6-career__who { --v6-logo-scale: .85; }
}
@media (max-width: 359px) {
  body.v6 .v6-career__who { --v6-logo-scale: .7; }
}

/* Case headers share rows across both columns, so wrapping credits cannot
   independently move the status away from the project subtitle. */
body.v6 .v6-case-head--rows { row-gap: 16px; }
body.v6 .v6-case-head--rows > * { min-width: 0; margin: 0; max-width: none; }
body.v6 .v6-case-role, body.v6 .v6-case-context { display: block; }
body.v6 .v6-case-year { white-space: nowrap; }
body.v6 .v6-case-head--rows > .v6-case-status { font-size: 12px; line-height: 24px; white-space: normal; }
@media (min-width: 900px) {
  body.v6 .v6-case-head--rows > .v6-case-title { grid-column: 1 / 9; grid-row: 1; }
  body.v6 .v6-case-head--rows > .v6-case-credit { grid-column: 9 / 13; grid-row: 1; }
  body.v6 .v6-case-head--rows > .v6-case-sub { grid-column: 1 / 9; grid-row: 2; align-self: baseline; }
  body.v6 .v6-case-head--rows > .v6-case-status { grid-column: 9 / 13; grid-row: 2; align-self: baseline; }
}
@media (max-width: 899px) {
  body.v6 .v6-case-head--rows { row-gap: 12px; }
  body.v6 .v6-case-head--rows > * { grid-column: 1 / -1; }
  body.v6 .v6-case-head--rows > .v6-case-credit { margin-top: 12px; }
}

/* Trim the 24px source-art overhang beneath the True Swing notebook panel. */
body.v6 .v6-case-media img[src$="/true-swing/keychain-yardage-book-1920.webp"] {
  aspect-ratio: 1920 / 1056;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

/* Kodak's recording places the phone on the right of a wide canvas.
   Crop the empty left side; use the same crop for the video and its poster. */
body.v6 .v6-case-hero video[data-clean-player] {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: right center;
}
body.v6 .v6-video-controls:not([hidden]) {
  display: flex; align-items: center; gap: 16px; padding-block: 12px;
  color: var(--v6-ink, #18211d); font-size: 14px; line-height: 20px;
}
body.v6 .v6-video-controls button {
  font: inherit; color: inherit; background: transparent; border: 0;
  min-width: 52px; min-height: 44px; padding: 0; cursor: pointer; text-align: left;
}
body.v6 .v6-video-controls input { flex: 1; min-width: 0; min-height: 44px; accent-color: #2f7352; }
body.v6 .v6-video-controls output { font-variant-numeric: tabular-nums; }
body.v6 .v6-video-controls a { white-space: nowrap; color: inherit; text-underline-offset: 4px; }
body.v6 .v6-video-controls :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Blend the Innit phone composition's white surround into the paper.
   The figure supplies the backdrop inside its isolated reveal layer. */
body.v6 .v6-case-fig:has(> img[src="/assets/sqs/zco/1b7e7d21-5a1c-4a12-90ef-dd54f63a58db/1.jpg"]) {
  background: var(--v4-paper);
}
body.v6 .v6-case-fig > img[src="/assets/sqs/zco/1b7e7d21-5a1c-4a12-90ef-dd54f63a58db/1.jpg"] {
  mix-blend-mode: multiply;
}

/* The lemon asset includes a white border and a strip of the next panel.
   Window the complete screen (x16, y61, 504 × 895) without altering the source. */
body.v6 .v6-innit-lemon-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 504 / 895;
  overflow: hidden;
  border-radius: 2px;
}
body.v6 .v6-innit-lemon-crop > img {
  position: absolute;
  display: block;
  width: calc(100% * 537 / 504);
  max-width: none;
  height: auto;
  left: calc(-100% * 16 / 504);
  top: calc(-100% * 61 / 895);
}

/* Keep Sherpa's original diffuse shadow; blend its white background into paper. */
body.v6 .v6-case-fig:has(> img[src="/assets/sqs/zco/14972be9-aaf8-4085-916a-019167a83864/sherpa-2.jpg"]) {
  background: var(--v4-paper);
}
body.v6 .v6-case-fig > img[src="/assets/sqs/zco/14972be9-aaf8-4085-916a-019167a83864/sherpa-2.jpg"] {
  mix-blend-mode: multiply;
}

/* Interface artwork has its own editorial scale, independent of photo panel width.
   Preserve full proportions and keep captions attached to the narrower figure. */
body.v6 .v6-case-media .v6-case-fig[data-media] {
  width: 100%; max-width: var(--v6-media-max); justify-self: center;
}
body.v6 .v6-case-media .v6-case-fig[data-media] > img { height: auto; }
/* The original website mockup preserves the soft shadow lost in its cutout. */
body.v6 .v6-case-fig:has(> img[src="/assets/sqs/zco/088dbba2-577a-462f-8017-5db76bc75a34/sherpa-3.jpg"]) {
  background: var(--v4-paper);
}
body.v6 .v6-case-fig > img[src="/assets/sqs/zco/088dbba2-577a-462f-8017-5db76bc75a34/sherpa-3.jpg"] {
  mix-blend-mode: multiply;
}

/* UI captures retain the square edges of the original screen artwork. */
body.v6 .v6-case-fig[data-media] > img,
body.v6 .v6-case-fig[data-media] .v6-innit-lemon-crop,
body.v6 .v6-case-fig[data-media] .v6-innit-lemon-crop > img {
  border-radius: 0;
}

/* Reviewed white-background compositions blend into paper while retaining shadows.
   Supply the backdrop inside the figure's isolated reveal layer. */
body.v6 .v6-case-fig[data-blend="multiply"] { background: var(--v4-paper); }
body.v6 .v6-case-fig[data-blend="multiply"] > img { mix-blend-mode: multiply; }

/* Keep the 720px commit recording readable without enlarging the UI. */
body.v6 .v6-case-fig:has(> video[src="/assets/video/outdoorsy-v2/system-tokens-github.mp4"]) {
  width: 100%; max-width: 560px; justify-self: center;
}

/* Radio is part of the campaign evidence, on the same content grid as images. */
body.v6 .v6-case-radio {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; width: 100%; max-width: 1200px; margin: 32px auto 0;
}
body.v6 .v6-case-radio > div { min-width: 0; }
body.v6 .v6-case-radio .v6-cap { margin: 0 0 12px; }
body.v6 .v6-case-radio audio { display: block; width: 100%; }
@media (max-width: 640px) {
  body.v6 .v6-case-radio { grid-template-columns: 1fr; }
}

/* Contact: headline and supporting copy share a top edge; actions stay with the copy. */
body.v6 .v6-contact-intro { align-items: start; padding-bottom: var(--v6-section-space); }
body.v6 .v6-contact-intro > .v6-mast {
  grid-column: 1 / 7; margin: 0; font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.08; text-wrap: balance;
}
body.v6 .v6-contact-details { grid-column: 7 / 13; min-width: 0; padding-top: 4px; }
body.v6 .v6-contact-details > p { margin: 0 0 24px; font-size: 20px; line-height: 30px; text-wrap: pretty; }
body.v6 .v6-contact .v6-contact-details > .v6-contact-now {
  margin: 32px 0 0; gap: 24px; align-items: center;
}
body.v6 .v6-contact-details .v6-contact-now > a { margin: 0; }
@media (max-width: 899px) {
  body.v6 .v6-contact-intro { row-gap: 32px; }
  body.v6 .v6-contact-intro > .v6-mast,
  body.v6 .v6-contact-details { grid-column: 1 / -1; }
  body.v6 .v6-contact-details { padding-top: 0; }
}
@media (max-width: 599px) {
  body.v6 .v6-contact-details > p { font-size: 18px; line-height: 28px; }
}