/* Project stories share the map sketchbook's ink, paper and reading rhythm. */
html body.visual-refresh.case-study-page {
  --paper: #161511; --paper-2: #1d1b17; --surface: #1d1b17; --surface-2: #26231e; --surface-3: #302c25;
  --ink: #f4f0e6; --ink-2: #d1cabe; --muted: #aaa397; --line: rgb(232 223 203 / .16); --line-strong: rgb(232 223 203 / .3);
  background: var(--paper) !important;
}
html[data-theme="light"] body.visual-refresh.case-study-page {
  --paper: #f2eee4; --paper-2: #e9e4d8; --surface: #f7f3ea; --surface-2: #eae5d9; --surface-3: #faf7f0;
  --ink: #201e1a; --ink-2: #4d4942; --muted: #6c665c; --line: rgb(44 36 25 / .18); --line-strong: rgb(44 36 25 / .32);
}
html body.visual-refresh.case-study-page::before,
html body.visual-refresh.case-study-page::after { display: none !important; }
html body.visual-refresh .case76 {
  --cs-display: var(--field-display, Impact, "Arial Narrow", sans-serif);
  --cs-body: Arial, Helvetica, sans-serif;
  --story-accent: var(--accent-readable, #c7462a);
  padding-block: 32px 96px !important;
}
html[data-theme="light"] body.visual-refresh .case76 {
  --story-accent: var(--accent-readable, #b63820);
}
html body.visual-refresh:not(.a11y-reading-mode) .case76 {
  width: min(1440px, calc(100% - 144px)) !important;
}
html body.visual-refresh .case76 .case76-chapter {
  padding-block: clamp(52px, 6vw, 80px) !important;
  scroll-margin-top: 88px !important;
}
html body.visual-refresh .case76 .case76-chapter--hero {
  padding-block: 20px 64px !important;
  overflow: visible !important;
}
html body.visual-refresh .case76 .case76-hero {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  gap: 28px clamp(32px, 5vw, 80px) !important;
  align-items: center !important;
}
/* No controls live in this nonsemantic wrapper; reading order remains in the DOM. */
html body.visual-refresh .case76 .case76-hero-copy {
  display: contents !important;
}
html body.visual-refresh .case76 .case76-meta {
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 8px 24px !important;
  padding-bottom: 18px !important;
  border-color: var(--line) !important;
}
html body.visual-refresh .case76 h1 {
  grid-column: 1;
  grid-row: 2;
  gap: .14em !important;
  font-size: clamp(3.5rem, 6.6vw, 7rem) !important;
  line-height: .86 !important;
  letter-spacing: -.015em !important;
  font-weight: 900 !important;

  font-family: var(--cs-display) !important;

  text-transform: uppercase !important;
}
html body.visual-refresh .case76 h1 span {
  max-width: 100% !important;
  line-height: inherit !important;
  padding: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal;
  text-wrap: balance;
}
html body.visual-refresh .case76 h1 em {
  width: auto !important;
  font-family: var(--cs-body) !important;
  font-size: clamp(1rem, 1.6vw, 1.5rem) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .025em !important;
  line-height: 1.4 !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
  color: var(--ink-2) !important;
  transform: none !important;
  padding: 0 !important;

  text-transform: none !important;
}
html[data-theme="light"] body.visual-refresh .case76 h1 em {
  color: var(--ink-2) !important;
}
html body.visual-refresh .case76 .case76-deck {
  grid-column: 1;
  grid-row: 3;
  max-width: 58ch !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.1vw, 1.125rem) !important;
  line-height: 1.7 !important;
}
html body.visual-refresh .case76 :is(.case76-meta span, .case76-meta small) {
  font-size: .75rem !important;
  line-height: 1.6 !important;
  font-weight: 650 !important;
  letter-spacing: .07em !important;
}
html body.visual-refresh .case76 .case76-meta small {
  text-align: left !important;
}
html body.visual-refresh .case76 .case76-hero > .case76-hero-art {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
}
html body.visual-refresh .case76 .case76-hero-art img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto 16 / 9 !important;
  object-fit: contain !important;
  padding: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
}
html body.visual-refresh .case76[data-project="open-mind"] .case76-hero-art img {
  aspect-ratio: auto 7 / 4 !important;
}
html body.visual-refresh .case76 .case76-hero-art figcaption {
  margin: 12px 0 0 !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body.visual-refresh .case76 .case76-hero-art figcaption small {
  font-size: inherit !important;
}
html body.visual-refresh .case76 .case76-tags {
  grid-column: 1 / -1;
  grid-row: 4;
  gap: 10px 24px !important;
  margin-top: 4px !important;
}
html body.visual-refresh .case76 .case76-tags span {
  border: 0 !important;
  padding: 0 !important;
  font-size: .75rem !important;
  line-height: 1.6 !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body.visual-refresh .case76 .project-evidence {
  grid-column: 1 / -1;
  grid-row: 5;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: 0 !important;
  padding-top: 24px !important;
  gap: 24px 32px !important;
}
html body.visual-refresh .case76 .project-evidence dt {
  font-size: .75rem !important;
  line-height: 1.5 !important;
  letter-spacing: .07em !important;
}
html body.visual-refresh .case76 .project-evidence dd {
  font-size: .9rem !important;
  line-height: 1.65 !important;
}

/* A quiet hierarchy replaces oversized chapter counters and dense side labels. */
html body.visual-refresh .case76 .case76-heading {
  display: block !important;
  max-width: 57rem !important;
  margin-bottom: 32px !important;
  padding: 0 !important;
}
html body.visual-refresh .case76 .case76-heading > span {
  display: block !important;
  margin-bottom: 12px !important;
  font-size: .75rem !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  letter-spacing: .09em !important;
}
html body.visual-refresh .case76 .case76-heading > span::after {
  display: none !important;
}
html body.visual-refresh .case76 .case76-heading h2 {
  max-width: 26ch !important;
  font-size: clamp(2.4rem, 4vw, 4rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: -.01em !important;
  text-wrap: pretty;

  font-family: var(--cs-display) !important;

  text-transform: uppercase !important;
}
html body.visual-refresh .case76 .case76-heading > p {
  max-width: 68ch !important;
  margin-top: 18px !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
}
html body.visual-refresh .case76 .case76-context {
  gap: clamp(32px, 4.5vw, 64px) !important;
}
html body.visual-refresh .case76 .case76-context-copy article {
  display: block !important;
  padding-block: 24px !important;
}
html body.visual-refresh .case76 .case76-context-copy article::before {
  display: none !important;
}
html body.visual-refresh .case76 :is(.case76-context-copy small, .case76-facts small, .case76-doc small) {
  font-size: .72rem !important;
  font-weight: 650 !important;
  line-height: 1.6 !important;
  letter-spacing: .065em !important;
}
html body.visual-refresh .case76 :is(.case76-context-copy p, .case76-flow p, .case76-media-copy p) {
  max-width: 65ch !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}
html body.visual-refresh .case76 .case76-context-copy p {
  margin-top: 12px !important;
}
html body.visual-refresh .case76 .case76-context aside {
  gap: 24px !important;
}
html body.visual-refresh .case76 .case76-metrics article {
  min-height: 120px !important;
  padding: 24px 14px !important;
}
html body.visual-refresh .case76 .case76-metrics strong {
  font-size: 3.5rem !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;

  font-family: var(--cs-display) !important;

  font-weight: 900 !important;
}
html body.visual-refresh .case76 .case76-metrics span {
  margin-top: 10px !important;
  font-size: .85rem !important;
  line-height: 1.55 !important;
}
html body.visual-refresh .case76 .case76-facts article {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  padding-block: 16px !important;
}
html body.visual-refresh .case76 .case76-facts strong {
  font-size: .95rem !important;
  font-weight: 550 !important;
  line-height: 1.65 !important;
}
html body.visual-refresh .case76 .case76-flow {
  gap: 32px 56px !important;
}
html body.visual-refresh .case76 .case76-flow article {
  min-height: 0 !important;
  padding: 24px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
}
html body.visual-refresh .case76 .case76-flow article::after {
  display: none !important;
}
html body.visual-refresh .case76 .case76-flow b {
  margin-bottom: 14px !important;
  font-size: .85rem !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
}
html body.visual-refresh .case76 .case76-flow h3 {
  max-width: 28ch !important;
  margin-bottom: 14px !important;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -.025em !important;
}

/* Media and public reports retain their native controls and real links. */
html body.visual-refresh .case76 .case76-media {
  gap: 40px !important;
}
html body.visual-refresh .case76 .case76-media-card {
  margin-top: 0 !important;
}
html body.visual-refresh .case76 .case76-media-copy {
  display: block !important;
  padding: 0 !important;
}
html body.visual-refresh .case76 .case76-media-copy small {
  display: block !important;
  margin-bottom: 10px !important;
  font-size: .72rem !important;
  line-height: 1.6 !important;
  writing-mode: horizontal-tb !important;
  rotate: none !important;
}
html body.visual-refresh .case76 .case76-media-copy h3 {
  margin-bottom: 12px !important;
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}
html body.visual-refresh .case76 .case76-video {
  border-radius: 3px !important;
  box-shadow: none !important;
}
html body.visual-refresh .case76 .case76-docs {
  width: min(100%, 57rem) !important;
  margin: 36px 0 48px !important;
  gap: 16px !important;
}
html body.visual-refresh .case76 .case76-doc {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  padding: 24px !important;
  border-radius: 3px !important;

  background: var(--surface) !important;

  border: 1px solid var(--line) !important;
}
html body.visual-refresh .case76 .case76-doc::before,
html body.visual-refresh .case76 .case76-doc::after {
  display: none !important;
}
html body.visual-refresh .case76 .case76-doc strong {
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
}
html body.visual-refresh .case76 .case76-doc p {
  margin-top: 10px !important;
  font-size: .95rem !important;
  line-height: 1.7 !important;
}
html body.visual-refresh .case76 .case76-doc a {
  min-height: 44px !important;
  font-size: .8125rem !important;
  letter-spacing: .02em !important;

  border-radius: 3px !important;

  background: transparent !important;

  border: 1px solid var(--line-strong) !important;

  color: var(--ink) !important;
}
html body.visual-refresh .case76 .case76-pager {
  width: 100% !important;
  margin-top: 64px !important;
}
html body.visual-refresh .case76 .case76-pager small {
  font-size: .75rem !important;
  line-height: 1.6 !important;
}
html body.visual-refresh .case76 .case76-pager > :is(a, button):first-child {
  padding-inline-start: 24px !important;
  background: transparent !important;
}
html body.visual-refresh .case76 .case76-pager > :is(a, button):first-child::before {
  display: none !important;
}
html body.visual-refresh .case76 .case76-pager > :is(a, button):last-child {
  padding-inline-end: 64px !important;
  border-color: var(--ink-2) !important;
}
html body.visual-refresh .case76 .case76-pager > :is(a, button):last-child::after {
  content: "→";
  display: grid !important;
  right: 20px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
}
html body.visual-refresh .case76 .case76-pager > :is(a, button):hover {
  background: var(--surface-2) !important;
}
html body.visual-refresh .case76 .case76-pager > :is(a, button):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
html body.visual-refresh.case-study-page .case76-topbar a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  font-size: .8125rem !important;
}
html body.visual-refresh.case-study-page .case76-topbar__title {
  font-size: .75rem !important;
  line-height: 1.5 !important;
  letter-spacing: .08em !important;
}

/* Original project artwork sits beside the films, with its source ratio intact. */
html body.visual-refresh .case76 .case76-artwork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 28px;
  margin: 0 0 48px;
}
html body.visual-refresh .case76 .case76-artwork:has(> figure:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
html body.visual-refresh .case76 .case76-artwork figure { margin: 0; min-width: 0; }
html body.visual-refresh .case76 .case76-artwork img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}
html body.visual-refresh .case76 .case76-artwork figcaption {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.6;
}
html body.visual-refresh .case76 .case76-artwork figure.is-portrait {
  width: min(100%, 18rem);
  justify-self: center;
}
html body.visual-refresh .case76 .case76-video { aspect-ratio: 16 / 9 !important; }
html body.visual-refresh .case76 .case76-heading::before { display: none !important; }
html body.visual-refresh .case76 .case76-media-copy small { text-transform: none !important; letter-spacing: .02em !important; }
html body.visual-refresh.case-study-page .case76-topbar {
  height: 64px;
  padding-inline: clamp(20px, 3vw, 48px);

  background: var(--paper) !important;

  border-bottom: 1px solid var(--line) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;
}
html body.visual-refresh.case-study-page .case76-topbar__title {
  text-transform: none;
  letter-spacing: 0 !important;
}
@media screen and (max-width: 760px), screen and (max-width: 1000px) and (max-height: 700px) and (pointer: coarse) {
  html body.visual-refresh .case76 .case76-artwork { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html body.visual-refresh .case76 .case76-hero-art img,
  html body.visual-refresh .case76 .case76-artwork img { border-radius: 3px !important; }
  html body.visual-refresh.case-study-page .case76-topbar { height: 56px !important; padding-inline: 20px; }
}

/* Small text and data need a readable foreground on every project surface. */
html body.visual-refresh .case76 :is(.case76-meta > span, .project-evidence dt, .case76-heading > span, .case76-context-copy small, .case76-flow b, .case76-media-copy small, .case76-doc small, .case76-pager small, .case76-metrics strong) {
  color: var(--ink-2, var(--ink)) !important;
}
html body.visual-refresh.case-study-page .case76-rail a.is-active span,
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button.is-active span {
  color: var(--ink) !important;
}

/* Duplicate floating controls stay out of the project reading surface. */
html body.visual-refresh.project-open .floating-controls {
  display: none !important;
}
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-scroller {
  scroll-snap-type: none !important;
  scroll-padding-block: 88px 32px !important;
}
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-status {
  font-size: .75rem !important;
  line-height: 1.5 !important;
  letter-spacing: .06em !important;
}
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-back strong {
  font-size: .8125rem !important;
  line-height: 1.5 !important;
}
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button span,
html body.visual-refresh.case-study-page .case76-rail a span {
  font-size: .65rem !important;
}
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button b,
html body.visual-refresh.case-study-page .case76-rail a b {
  font-size: .7rem !important;
  line-height: 1.5 !important;
}

@media (min-width: 1150px) {
  html body.visual-refresh:not(.a11y-reading-mode) .case76 .case76-context {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr) !important;
  }
}
@media (max-width: 1149px) {
  html body.visual-refresh .case76 .case76-context {
    grid-template-columns: 1fr !important;
  }
  html body.visual-refresh .case76 .project-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.visual-refresh .case76 .case76-context aside {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
}
@media screen and (max-width: 760px), screen and (max-width: 1000px) and (max-height: 700px) and (pointer: coarse) {
  html body.visual-refresh .case76,
  html body.visual-refresh:not(.a11y-reading-mode) .case76 {
    width: calc(100% - 40px) !important;
    padding-block: 20px 48px !important;
  }
  html body.visual-refresh .case76 .case76-chapter {
    padding-block: 44px !important;
  }
  html body.visual-refresh .case76 .case76-chapter--hero {
    padding-block: 12px 44px !important;
  }
  html body.visual-refresh .case76 .case76-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  html body.visual-refresh .case76 .case76-meta { grid-row: 1; }
  html body.visual-refresh .case76 h1 {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(2.7rem, 12vw, 4.5rem) !important;
    line-height: 1.02 !important;
  }
  html body.visual-refresh .case76 .case76-hero > .case76-hero-art {
    grid-row: 3;
    margin-top: 0 !important;
  }
  html body.visual-refresh .case76 .case76-deck { grid-column: 1; grid-row: 4; }
  html body.visual-refresh .case76 .case76-tags { grid-row: 5; gap: 8px 18px !important; }
  html body.visual-refresh .case76 .project-evidence { grid-row: 6; }
  html body.visual-refresh .case76 .case76-hero-art figcaption {
    margin-top: 10px !important;
  }
  html body.visual-refresh .case76 .project-evidence {
    grid-template-columns: 1fr !important;
  }
  html body.visual-refresh .case76 .case76-heading h2 {
    font-size: clamp(1.9rem, 8vw, 2.65rem) !important;
    line-height: 1.15 !important;
  }
  html body.visual-refresh .case76 .case76-heading > p {
    font-size: 1rem !important;
  }
  html body.visual-refresh .case76 .case76-context aside,
  html body.visual-refresh .case76 .case76-flow,
  html body.visual-refresh .case76 .case76-media {
    grid-template-columns: 1fr !important;
  }
  html body.visual-refresh .case76 .case76-facts {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  html body.visual-refresh .case76 .case76-facts article {
    min-height: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
  }
  html body.visual-refresh .case76 .case76-doc {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
  html body.visual-refresh .case76 .case76-doc-actions,
  html body.visual-refresh .case76 .case76-doc a {
    grid-column: 1 !important;
  }
  html body.visual-refresh .case76 .case76-pager {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body.visual-refresh .case76 .case76-pager :is(a, button) {
    padding: 18px !important;
    min-height: 88px !important;
  }
  html body.visual-refresh .case76 .case76-pager > :is(a, button):first-child {
    padding-inline-start: 18px !important;
  }
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-status {
    display: none !important;
  }
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail {
    display: none !important;
  }
  html body.visual-refresh.case-study-page .case76-footer {
    padding: 24px 20px !important;
    font-size: .75rem !important;
    line-height: 1.6 !important;
  }
  html body.visual-refresh.case-study-page .case76-mobile-actions {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    justify-content: start !important;
    gap: 12px !important;
    width: calc(100% - 40px) !important;
    margin: 0 auto max(24px, env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body.visual-refresh.case-study-page .case76-mobile-actions a {
    min-height: 44px !important;
    height: auto !important;
    padding: 12px 20px !important;
    font-size: .8rem !important;
  }
  html body.visual-refresh.case-study-page .case76-mobile-actions a:last-child {
    color: #000 !important;
  }
}

/* Reading and contrast preferences remain in control of type and colour. */
html body.visual-refresh.a11y-reading-mode .case76 {
  width: min(50rem, calc(100% - 144px)) !important;
}
html body.visual-refresh.a11y-reading-mode .case76 .case76-hero {
  grid-template-columns: minmax(0, 1fr) !important;
}
html body.visual-refresh.a11y-reading-mode .case76 .case76-deck {
  grid-column: 1;
  grid-row: 3;
}
html body.visual-refresh.a11y-reading-mode .case76 .case76-hero > .case76-hero-art { grid-row: 4; }
html body.visual-refresh.a11y-reading-mode .case76 .case76-tags { grid-row: 5; }
html body.visual-refresh.a11y-reading-mode .case76 .project-evidence { grid-row: 6; grid-template-columns: 1fr !important; }
html body.visual-refresh.a11y-high-contrast .case76 { --story-accent: var(--ink); }
html body.visual-refresh.a11y-high-contrast .case76 :is(.case76-meta span, .case76-meta small, .case76-tags span, .project-evidence dt, .case76-context-copy small, .case76-flow b, .case76-media-copy small, .case76-doc small) {
  color: var(--ink) !important;
}
html body.visual-refresh.a11y-high-contrast .case76 :is(.case76-doc, .case76-video, .case76-hero-art img) {
  border-width: 2px !important;
}
@media screen and (max-width: 760px), screen and (max-width: 1000px) and (max-height: 700px) and (pointer: coarse) {
  html body.visual-refresh.a11y-reading-mode .case76 {
    width: calc(100% - 40px) !important;
  }
}

/* Printed project stories use paper typography and allow natural page breaks. */
@media print {
  html:has(body.visual-refresh.case-study-page),
  html:has(body.visual-refresh.project-open) {
    background: #fff !important;
    color-scheme: light !important;
  }
  html body.visual-refresh .case76 * {
    animation: none !important;
    transition: none !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  html body.visual-refresh.project-open #portfolio-cursor {
    display: none !important;
  }
  html:has(body.visual-refresh.project-open),
  html body.visual-refresh.project-open {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body.visual-refresh.project-open > :not([data-project-layer]),
  html body.visual-refresh.project-open [data-project-layer] :is(.case-study-veil, .case-study-bar, .case-study-rail) {
    display: none !important;
  }
  html body.visual-refresh.project-open [data-project-layer]:not([hidden]),
  html body.visual-refresh.project-open [data-project-layer]:not([hidden]) :is(.case-study-scroller, .case-study-content) {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    outline: 0 !important;
    background: #fff !important;
  }
  html body.visual-refresh.case-study-page :is(.case76-topbar, .case76-rail, .case76-mobile-actions, .case76-footer),
  html body.visual-refresh .case76 .case76-play,
  html body.visual-refresh .case76 .case76-video > small {
    display: none !important;
  }
  html body.visual-refresh .case76,
  html body.visual-refresh:not(.a11y-reading-mode) .case76,
  html body.visual-refresh.a11y-reading-mode .case76 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111 !important;
  }
  html body.visual-refresh .case76 :is(h1, h1 em, h2, h3, p, small, span, b, strong, dt, dd, a, figcaption) {
    color: #111 !important;
    text-shadow: none !important;
  }
  html body.visual-refresh .case76 .case76-hero h1 em {
    color: #111 !important;
  }
  html body.visual-refresh .case76 .case76-chapter {
    padding-block: 20pt !important;
    break-inside: auto !important;
  }
  html body.visual-refresh .case76 :is(.case76-hero, .case76-context, .case76-flow, .case76-media, .case76-artwork) {
    display: block !important;
  }
  html body.visual-refresh .case76 .case76-hero-copy {
    display: grid !important;
    gap: 12pt !important;
  }
  html body.visual-refresh .case76 h1 {
    font-size: 40pt !important;
    line-height: 1.1 !important;
  }
  html body.visual-refresh .case76 .case76-heading h2 {
    font-size: 22pt !important;
    line-height: 1.2 !important;
  }
  html body.visual-refresh .case76 :is(.case76-deck, .case76-heading > p, .case76-context-copy p, .case76-flow p, .case76-media-copy p, .case76-doc p, .project-evidence dd) {
    font-size: 12pt !important;
    line-height: 1.55 !important;
  }
  html body.visual-refresh .case76 :is(small, figcaption, .case76-meta span, .case76-tags span, .project-evidence dt, .case76-heading > span, .case76-flow b) {
    font-size: 11pt !important;
    line-height: 1.5 !important;
    letter-spacing: .02em !important;
  }
  html body.visual-refresh .case76 :is(.case76-heading, h1, h2, h3) {
    break-after: avoid !important;
  }
  html body.visual-refresh .case76 :is(.case76-context-copy article, .case76-flow article, .case76-doc, .case76-hero-art, .case76-video, .project-evidence > div) {
    break-inside: avoid !important;
  }
  html body.visual-refresh .case76 .case76-hero-art {
    max-width: 15cm !important;
    margin: 18pt 0 !important;
  }
  html body.visual-refresh .case76 .case76-artwork figure {
    max-width: 15cm !important;
    margin: 18pt 0 !important;
    break-inside: avoid !important;
  }
  html body.visual-refresh .case76 .case76-hero-art img {
    width: 100% !important;
    height: auto !important;
    max-height: 8cm !important;
    object-fit: contain !important;
    background: #fff !important;
  }
  html body.visual-refresh .case76 .case76-pager {
    display: none !important;
  }
  html body.visual-refresh .case76 .case76-doc {
    background: #fff !important;
    border-color: #888 !important;
  }
  html body.visual-refresh .case76 .case76-doc a {
    background: #fff !important;
    border-color: #555 !important;
    font-size: 11pt !important;
  }
}

/* The paper unfolds briefly as a chapter enters. Content is never hidden;
   the observer removes the class when this finite animation finishes. */
@keyframes field-reader-unfold {
  from { rotate: x -4deg; translate: 0 12px; }
  to { rotate: x 0deg; translate: 0 0; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  html:not(.a11y-reduce-motion):not(.a11y-focus-mode) body.visual-refresh:not(.a11y-reduce-motion):not(.a11y-focus-mode) .case76 .case76-fold-enter > * {
    transform-origin: 50% 0;
    animation: field-reader-unfold 380ms cubic-bezier(.2, .7, .2, 1) both !important;
  }
}

/* Named chapter navigation stays available in both versions of each reader. */
html body.visual-refresh.case-study-page .case76-rail,
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(1440px, calc(100% - 144px)) !important;
  height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--paper) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  left: 50% !important;
  right: auto !important;
  translate: -50% 0 !important;
  transform: none !important;
  z-index: 45 !important;
}
html body.visual-refresh.case-study-page .case76-rail { position: fixed !important; top: 64px !important; }
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail { position: absolute !important; top: 58px !important; }
html body.visual-refresh.case-study-page .case76-rail a,
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 44px !important;
  padding: 4px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink-2) !important;
  text-decoration: none !important;
}
html body.visual-refresh.case-study-page .case76-rail a span,
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button span { color: inherit !important; font-size: .75rem !important; }
html body.visual-refresh.case-study-page .case76-rail a b,
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button b {
  display: block !important;
  position: static !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  transform: none !important;
  color: inherit !important;
  font-size: .8125rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: none !important;
}
html body.visual-refresh.case-study-page .case76-rail a.is-active,
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button.is-active {
  color: var(--ink) !important;
  box-shadow: inset 0 -2px var(--accent) !important;
}
html body.visual-refresh.case-study-page .case76-rail a:focus-visible,
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: -4px !important; }
html body.visual-refresh.case-study-page .case76 { padding-top: 84px !important; }
html body.visual-refresh .case-study-layer[data-project-layer] .case76 { padding-top: 100px !important; }
html body.visual-refresh .case76 .case76-chapter { scroll-margin-top: 64px !important; }
html body.visual-refresh .case-study-layer[data-project-layer] .case-study-scroller { scroll-padding-top: 136px !important; }
html body.visual-refresh .case76 .case76-chapter:focus { outline: none; }

/* A short route into the work; source details can be opened when useful. */
html body.visual-refresh .case76 .case76-quick-links {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
html body.visual-refresh .case76 .case76-quick-links a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  color: var(--ink);
  font-size: .875rem;
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media screen and (min-width: 761px) and (min-height: 701px), screen and (min-width: 1001px), screen and (min-width: 761px) and (pointer: fine) {
  html body.visual-refresh:not(.a11y-reading-mode) .case76 h1 { grid-column: 1; grid-row: 2; align-self: end; }
  html body.visual-refresh:not(.a11y-reading-mode) .case76 .case76-deck { grid-column: 1; grid-row: 3; align-self: start; }
  html body.visual-refresh:not(.a11y-reading-mode) .case76 .case76-quick-links { grid-column: 1; grid-row: 4; align-self: start; }
  html body.visual-refresh:not(.a11y-reading-mode) .case76 .case76-hero > .case76-hero-art { grid-column: 2; grid-row: 2 / 5; align-self: center; margin: 0 !important; }
}
html body.visual-refresh .case76 .case76-hero > .case76-hero-art { grid-row: 4; }
html body.visual-refresh .case76 .case76-tags { grid-row: 5; }
html body.visual-refresh .case76 .project-evidence { grid-row: 6; }
html body.visual-refresh .case76 .case76-details { margin-top: 24px; border-block: 1px solid var(--line); }
html body.visual-refresh .case76 .case76-details > summary { min-height: 48px; padding: 14px 0; cursor: pointer; color: var(--ink); font-size: .875rem; font-weight: 600; }
html body.visual-refresh .case76 .case76-details .case76-facts { margin: 0; padding-bottom: 12px; }
html body.visual-refresh .case76 .case76-reflection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin: 0 0 44px; }
html body.visual-refresh .case76 .case76-reflection article { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
html body.visual-refresh .case76 .case76-reflection h3 { margin: 0 0 12px; font-size: 1.125rem; line-height: 1.35; font-weight: 600; }
html body.visual-refresh .case76 .case76-reflection p { margin: 0; max-width: 65ch; color: var(--ink-2); font-size: 1rem; line-height: 1.75; }
html body.visual-refresh .case76 .case76-artwork figure { width: min(100%, var(--art-width, 100%)); justify-self: center; }
html body.visual-refresh .case76 .case76-artwork figure.is-wide { grid-column: 1 / -1; }
html body.visual-refresh .case76 .case76-artwork figure.is-portrait { width: min(100%, var(--art-width), 18rem); }
html body.visual-refresh .case76 .case76-artwork .case76-art-link { display: block; width: 100%; color: var(--ink); text-decoration: none; }
html body.visual-refresh .case76 .case76-artwork .case76-art-link span { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; }
html body.visual-refresh .case76 .case76-artwork .case76-art-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 3px; }
html body.visual-refresh.case-study-page .case76-footer a { display: inline-flex; align-items: center; min-height: 44px; }

@media screen and (max-width: 760px), screen and (max-width: 1000px) and (max-height: 700px) and (pointer: coarse) {
  html body.visual-refresh.case-study-page .case76-rail,
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail { width: calc(100% - 40px) !important; height: 48px !important; }
  html body.visual-refresh.case-study-page .case76-rail { top: 56px !important; }
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail { top: 48px !important; }
  html body.visual-refresh.case-study-page .case76-rail a,
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button { height: 48px !important; padding-inline: 2px !important; }
  html body.visual-refresh.case-study-page .case76-rail a span,
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button span { display: none !important; }
  html body.visual-refresh.case-study-page .case76-rail a b,
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button b { font-size: .75rem !important; }
  html body.visual-refresh.case-study-page .case76 { padding-top: 76px !important; }
  html body.visual-refresh .case-study-layer[data-project-layer] .case76 { padding-top: 84px !important; }
  html body.visual-refresh .case76 .case76-deck { grid-row: 3; }
  html body.visual-refresh .case76 .case76-quick-links { grid-row: 4; gap: 4px 20px; }
  html body.visual-refresh .case76 .case76-hero > .case76-hero-art { grid-row: 5; }
  html body.visual-refresh .case76 .case76-tags { grid-row: 6; }
  html body.visual-refresh .case76 .project-evidence { grid-row: 7; }
  html body.visual-refresh .case76 .case76-reflection { grid-template-columns: 1fr; gap: 24px; }
  html body.visual-refresh .case76 .case76-chapter { scroll-margin-top: 52px !important; }
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-scroller { scroll-padding-top: 120px !important; }
}
html body.visual-refresh.a11y-reading-mode .case76 .case76-quick-links { grid-row: 4; }
html body.visual-refresh.a11y-reading-mode .case76 .case76-hero > .case76-hero-art { grid-row: 5; }
html body.visual-refresh.a11y-reading-mode .case76 .case76-tags { grid-row: 6; }
html body.visual-refresh.a11y-reading-mode .case76 .project-evidence { grid-row: 7; }
html body.visual-refresh.a11y-reading-mode .case76 .case76-reflection { grid-template-columns: 1fr; }
@media (forced-colors: active) {
  html body.visual-refresh.case-study-page .case76-rail a.is-active,
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail button.is-active { border-bottom: 2px solid Highlight !important; color: CanvasText !important; }
}
@media print {
  html body.visual-refresh.case-study-page .case76-rail,
  html body.visual-refresh .case-study-layer[data-project-layer] .case-study-rail,
  html body.visual-refresh .case76 .case76-quick-links,
  html body.visual-refresh .case76 .case76-art-link span { display: none !important; }
  html body.visual-refresh .case76 { padding-top: 0 !important; }
  html body.visual-refresh .case76 .case76-reflection { display: block; }
}

/* Native scroll padding and target margin are additive. Keep headings below the reader bar. */
html body.visual-refresh .case-study-layer[data-project-layer] .case76 .case76-chapter { scroll-margin-top: 12px !important; }

/* Overview has less top padding than the later chapters. Its metadata must
   clear both fixed bars when returning through the native section link. */
@media screen and (min-width: 761px) {
  html body.visual-refresh.case-study-page .case76 #projectHero { scroll-margin-top: 116px !important; }
}
@media screen and (max-width: 1000px) and (max-height: 700px) and (pointer: coarse) {
  html body.visual-refresh.case-study-page .case76 #projectHero { scroll-margin-top: 52px !important; }
}