@font-face {
  font-family: "Rasonate";
  src: url("./assets/fonts/Rasonate-VF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Architect Pro Alt 02";
  src: url("./assets/fonts/ArchitectProAlt02.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --case-black: #0a0a0a;
  --case-black-raised: #11110f;
  --case-orange: #ee6422;
  --case-cream: #f3efe6;
  --case-paper: #e7e5e2;
  --case-grey: #9b9b97;
  --case-line: rgba(243, 239, 230, 0.25);
  --case-line-strong: rgba(243, 239, 230, 0.46);
  --case-gutter: clamp(18px, 4vw, 62px);
  --case-pad: clamp(20px, 6vw, 115px);
  --case-max: 1400px;
  --case-display: "Rasonate", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --case-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --case-mono: "Courier New", Courier, monospace;
  --case-card: #f3f1ed;
  --case-card-hover: #faf8f4;
  --case-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --case-type-display: clamp(3.25rem, 2.1rem + 4.6vw, 7.5rem);
  --case-type-section: clamp(2.75rem, 2rem + 3.2vw, 6.25rem);
  --case-type-heading: clamp(1.25rem, 1.08rem + 0.65vw, 2rem);
  --case-type-card-title: clamp(1.125rem, 1.02rem + 0.42vw, 1.5rem);
  --case-type-body-lg: var(--case-type-body);
  --case-type-body: clamp(1rem, 0.92rem + 0.35vw, 1.125rem);
  --case-leading-display: 0.98;
  --case-leading-heading: 1.14;
  --case-leading-body: 1.45;
}

html {
  color-scheme: dark;
  background: var(--case-black);
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  overflow-x: clip;
  color: var(--case-cream) !important;
  background-color: var(--case-black) !important;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.68), rgba(10, 10, 10, 0.68)),
    url("./assets/paper-texture-dark.jpg") !important;
  background-position: center, center !important;
  background-size: auto, cover !important;
  background-attachment: fixed, fixed !important;
  font-family: var(--case-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(243, 239, 230, 0.085) 0 0.62px, transparent 0.95px),
    radial-gradient(circle, rgba(243, 239, 230, 0.05) 0 0.55px, transparent 0.85px),
    radial-gradient(circle, rgba(243, 239, 230, 0.026) 0 0.48px, transparent 0.78px);
  background-position: 0 0, 17px 11px, 5px 29px;
  background-size: 37px 37px, 59px 59px, 83px 83px;
  opacity: 0.74;
  -webkit-mask-image: radial-gradient(ellipse 112% 105% at 48% 45%, #000 12%, rgba(0, 0, 0, 0.86) 54%, rgba(0, 0, 0, 0.34) 87%, transparent 100%);
  mask-image: radial-gradient(ellipse 112% 105% at 48% 45%, #000 12%, rgba(0, 0, 0, 0.86) 54%, rgba(0, 0, 0, 0.34) 87%, transparent 100%);
}

#dc-root,
#dc-root > .sc-host {
  position: relative;
  z-index: 1;
  min-height: 100%;
  background: transparent !important;
}

/* Match the homepage navigation plane and type treatment. */
#dc-root header:first-of-type {
  position: sticky !important;
  z-index: 100 !important;
  top: 0 !important;
  min-height: 76px;
  color: var(--case-grey) !important;
  background: rgba(10, 10, 10, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#dc-root header:first-of-type > div {
  width: 100% !important;
  max-width: none !important;
  min-height: 76px;
  padding: 18px var(--case-gutter) !important;
}

#dc-root header:first-of-type a:first-child {
  border: 0 !important;
  color: var(--case-grey) !important;
  font: 850 0/1 var(--case-body) !important;
  letter-spacing: -0.035em !important;
}

#dc-root header:first-of-type a:first-child::after {
  content: "winnie.work";
  font-size: 16px;
}

#dc-root header:first-of-type nav {
  align-items: center;
  gap: clamp(22px, 3vw, 46px) !important;
  font-family: var(--case-mono) !important;
  font-size: 0 !important;
  letter-spacing: 0.08em !important;
}

#dc-root header:first-of-type nav a {
  position: relative;
  z-index: 0;
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 10px 0 !important;
  border: 0 !important;
  color: var(--case-grey) !important;
  background: none !important;
  font: 700 12px/1 var(--case-mono) !important;
  letter-spacing: 0.08em !important;
  transition: color 180ms ease, transform 180ms ease !important;
}

#dc-root header:first-of-type nav a.wordmark {
  font-size: 0 !important;
}

#dc-root header:first-of-type nav a.wordmark::after {
  content: "HOME";
  font-size: 12px;
}

#dc-root header:first-of-type nav a[href$="#case-studies"] {
  font-size: 0 !important;
}

#dc-root header:first-of-type nav a[href$="#case-studies"]::after {
  content: "WORK";
  font-size: 12px;
}

#dc-root header:first-of-type nav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(100% + 20px);
  height: 2.15em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg) scale(0.72, 0.82);
  transition: opacity 160ms ease, transform 260ms var(--case-ease);
}

#dc-root header:first-of-type nav a:hover,
#dc-root header:first-of-type nav a:focus-visible {
  color: var(--case-orange) !important;
  transform: translateY(-1px);
}

#dc-root header:first-of-type nav a:hover::before,
#dc-root header:first-of-type nav a:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-3deg) scale(1);
}

#dc-root header:first-of-type button {
  color: var(--case-grey) !important;
}

#dc-root header:first-of-type button span {
  background: currentColor !important;
}

/* PUBG pilot: use the homepage navigation component and interaction verbatim. */
body.case-study-pilot {
  --case-nav-page: clamp(22px, 5.5vw, 88px);
}

body.case-study-pilot.menu-open {
  overflow: hidden;
}

body.case-study-pilot #dc-root .case-skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: var(--case-black) !important;
  border: 0 !important;
  background: var(--case-orange);
  transform: translateY(-180%);
  transition: transform 200ms ease;
}

body.case-study-pilot #dc-root .case-skip-link:focus {
  transform: translateY(0);
}

body.case-study-pilot #dc-root .site-header {
  position: fixed !important;
  z-index: 100 !important;
  isolation: isolate;
  inset: 0 0 auto !important;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px var(--case-nav-page) !important;
  color: var(--case-grey) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: color 180ms ease;
}

body.case-study-pilot #dc-root .site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 10, 0.96);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

body.case-study-pilot #dc-root .site-header > .wordmark {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  color: var(--case-grey) !important;
  border: 0 !important;
  font-family: var(--case-body) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

body.case-study-pilot #dc-root .site-header > .wordmark .nav-role,
body.case-study-pilot #dc-root .site-header > .wordmark .nav-role > span {
  font: 400 13px/1.3 var(--case-body) !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

body.case-study-pilot #dc-root .site-header > .wordmark::after {
  content: none;
}

body.case-study-pilot #dc-root .site-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 46px) !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
}

body.case-study-pilot #dc-root .site-nav a,
body.case-study-pilot #dc-root .site-nav a[href$="#case-studies"] {
  position: relative;
  z-index: 0;
  display: block !important;
  min-height: 0;
  padding: 10px 0 !important;
  color: var(--case-grey) !important;
  border: 0 !important;
  background: none !important;
  font: 700 12px/1 var(--case-mono) !important;
  letter-spacing: 0.08em !important;
  transform: none;
  transition: color 180ms ease !important;
}

body.case-study-pilot #dc-root .site-nav a[href$="#case-studies"]::after {
  content: none;
}

body.case-study-pilot #dc-root .site-nav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(100% + 20px);
  height: 2.15em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg) scale(0.72, 0.82);
  transition: opacity 160ms ease, transform 260ms var(--case-ease);
}

body.case-study-pilot #dc-root .site-nav a:nth-child(even)::before {
  transform: translate(-50%, -50%) rotate(2deg) scale(0.72, 0.82);
}

body.case-study-pilot #dc-root .site-nav a:hover,
body.case-study-pilot #dc-root .site-nav a:focus-visible {
  color: var(--case-orange) !important;
  transform: none;
}

body.case-study-pilot #dc-root .site-nav a:hover::before,
body.case-study-pilot #dc-root .site-nav a:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-3deg) scale(1);
}

body.case-study-pilot #dc-root .site-nav a:nth-child(even):hover::before,
body.case-study-pilot #dc-root .site-nav a:nth-child(even):focus-visible::before {
  transform: translate(-50%, -50%) rotate(2deg) scale(1);
}

body.case-study-pilot #dc-root .menu-toggle {
  display: none;
}

body.case-study-pilot #dc-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared case-study typography and rhythm. */
#dc-root h1,
#dc-root h2,
#dc-root h3 {
  font-family: var(--case-display) !important;
  text-wrap: balance;
}

#dc-root h1 {
  max-width: 16ch !important;
  color: var(--case-cream) !important;
  font-size: clamp(48px, 7vw, 108px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.052em !important;
}

#dc-root h2 {
  color: var(--case-cream) !important;
  font-size: clamp(48px, 5.4vw, 80px) !important;
  font-weight: 760 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.038em !important;
}

#dc-root h3 {
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 740 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}

#dc-root p,
#dc-root blockquote,
#dc-root li,
#dc-root [style*="font:400 clamp(16px"],
#dc-root [style*="font: 400 clamp(16px"] {
  font-family: var(--case-body) !important;
  font-size: clamp(17px, 1.22vw, 20px) !important;
  line-height: 1.58 !important;
}

#dc-root [style*="Urbanist"],
#dc-root [style*="Inter"] {
  font-family: var(--case-body) !important;
}

#dc-root [style*="'DM Mono'"],
#dc-root [style*="DM Mono"] {
  font-family: var(--case-mono) !important;
}

#dc-root a:focus-visible,
#dc-root button:focus-visible {
  outline: 3px solid var(--case-orange) !important;
  outline-offset: 5px;
}

/* The homepage's process-book framing, translated to long-form stories. */
#dc-root [data-screen-label] {
  position: relative;
  isolation: isolate;
}

#dc-root section[data-screen-label]:not([data-screen-label="Hero"]) {
  width: min(calc(100% - (2 * var(--case-gutter))), var(--case-max)) !important;
  margin-inline: auto !important;
  border-top: 1px dashed var(--case-line) !important;
}

/* Hero metadata reads as one useful information band, not scattered microcopy. */
#dc-root section[data-screen-label="Hero"] + div + div {
  width: min(calc(100% - (2 * var(--case-gutter))), var(--case-max)) !important;
  margin: clamp(22px, 3vw, 38px) auto clamp(34px, 5vw, 72px) !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
  border: 1px dashed var(--case-line) !important;
  background: var(--case-black-raised) !important;
}

#dc-root section[data-screen-label="Hero"] + div + div > div {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

#dc-root section[data-screen-label="Hero"] + div + div span {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  color: var(--case-cream) !important;
  border: 1px dashed var(--case-line-strong) !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

#dc-root section[data-screen-label]::before,
#dc-root section[data-screen-label]::after {
  content: "";
  position: absolute;
  z-index: 20;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: var(--case-cream);
  clip-path: polygon(44% 0, 56% 0, 61% 38%, 100% 44%, 100% 56%, 61% 61%, 56% 100%, 44% 100%, 39% 61%, 0 56%, 0 44%, 39% 38%);
  opacity: 0.72;
}

#dc-root section[data-screen-label]::before {
  top: -6px;
  left: -6px;
}

#dc-root section[data-screen-label]::after {
  right: -6px;
  bottom: -6px;
}

#dc-root section[data-screen-label="Hero"] {
  width: min(100%, var(--case-max)) !important;
  min-height: clamp(300px, 43vw, 570px);
  display: grid !important;
  align-content: end;
  padding-top: clamp(86px, 12vw, 160px) !important;
  padding-bottom: clamp(48px, 7vw, 92px) !important;
}

#dc-root section[data-screen-label="Hero"]::before,
#dc-root section[data-screen-label="Hero"]::after {
  background: var(--case-orange);
}

#dc-root section[data-screen-label="Hero"] > div:first-child {
  color: var(--case-orange) !important;
  font-family: var(--case-mono) !important;
}

#dc-root section[data-screen-label="Hero"] > div:first-child::after {
  content: "";
  display: inline-block;
  width: clamp(42px, 5vw, 74px);
  height: 2px;
  margin-left: 12px;
  vertical-align: middle;
  background: var(--case-orange);
}

#dc-root section[data-screen-label="Hero"] + div {
  width: min(calc(100% - (2 * var(--case-gutter))), var(--case-max)) !important;
  height: clamp(330px, 55vw, 820px) !important;
  margin: 0 auto clamp(30px, 5vw, 72px) !important;
  padding: clamp(8px, 1vw, 14px);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--case-paper) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
  transform: rotate(-0.18deg);
}

#dc-root section[data-screen-label] > div:first-child[style*="'DM Mono'"],
#dc-root section[data-screen-label] > div:first-child[style*="DM Mono"] {
  color: var(--case-orange) !important;
}

/* A warm process-book chapter holds the homepage-style decision cards. */
#dc-root section[data-screen-label="Alignment move"] {
  margin-block: clamp(54px, 8vw, 112px) !important;
  padding: clamp(64px, 8vw, 112px) clamp(22px, 6vw, 96px) !important;
  color: var(--case-black) !important;
  border: 0 !important;
  border-radius: clamp(24px, 3vw, 42px) clamp(24px, 3vw, 42px) 4px 4px;
  background-color: var(--case-paper) !important;
  background-image:
    radial-gradient(circle, rgba(10, 10, 10, 0.075) 0 0.6px, transparent 0.9px),
    radial-gradient(circle, rgba(10, 10, 10, 0.04) 0 0.55px, transparent 0.85px) !important;
  background-position: 0 0, 19px 13px !important;
  background-size: 41px 41px, 67px 67px !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

#dc-root section[data-screen-label="Alignment move"]::before,
#dc-root section[data-screen-label="Alignment move"]::after {
  background: var(--case-black);
}

#dc-root section[data-screen-label="Alignment move"] > div:first-child {
  display: none !important;
}

#dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) {
  display: grid !important;
  justify-items: center;
  flex: 1 1 100% !important;
  text-align: center;
}

#dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) h2 {
  position: relative;
  z-index: 0;
  max-width: 18ch !important;
  margin: 0 auto !important;
  color: var(--case-black) !important;
  background-image: linear-gradient(90deg, transparent 0 38%, var(--case-orange) 38% 64%, transparent 64% 100%);
  background-repeat: no-repeat;
  background-position: center 88%;
  background-size: 100% 0.28em;
}

#dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > p,
#dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > div {
  max-width: 62ch;
  margin-inline: auto !important;
  color: rgba(10, 10, 10, 0.7) !important;
  text-align: center;
}

#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid {
  width: 100%;
  gap: clamp(16px, 1.8vw, 32px) !important;
  margin-top: clamp(10px, 2vw, 24px);
}

#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div {
  position: relative;
  min-height: 100%;
  padding: clamp(22px, 2.2vw, 34px) !important;
  border: 1px dashed rgba(243, 239, 230, 0.34) !important;
  background: #10100f !important;
  transition: transform 260ms var(--case-ease), border-color 180ms var(--case-ease), background 180ms var(--case-ease);
}

#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div::before,
#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div::after {
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  content: "";
  pointer-events: none;
  background: rgba(243, 239, 230, 0.78);
  clip-path: polygon(44% 0, 56% 0, 61% 38%, 100% 44%, 100% 56%, 61% 61%, 56% 100%, 44% 100%, 39% 61%, 0 56%, 0 44%, 39% 38%);
}

#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div::before { top: -6px; left: -6px; }
#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div::after { right: -6px; bottom: -6px; }

#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div > h3 {
  width: fit-content;
  padding-inline: 0.06em;
  margin-inline: -0.06em !important;
  color: var(--case-cream) !important;
  background-image: linear-gradient(90deg, var(--case-orange), var(--case-orange));
  background-repeat: no-repeat;
  background-position: left 62%;
  background-size: 0% 82%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 140ms var(--case-ease), background-size 220ms var(--case-ease);
}

#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div > p,
#dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div > div:not([style*="DM Mono"]) {
  color: rgba(243, 239, 230, 0.72) !important;
}

#dc-root section[data-screen-label="Alignment move"] > .case-chapter-media {
  margin-top: clamp(10px, 2vw, 24px);
  padding: clamp(7px, 0.8vw, 12px);
  border: 0 !important;
  background: var(--case-card) !important;
  box-shadow: 0 14px 34px rgba(10, 10, 10, 0.22);
  transform: rotate(-0.12deg);
}

@media (hover: hover) {
  #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div:hover {
    border-color: var(--case-orange) !important;
    background: #17100c !important;
    transform: translateY(-2px);
  }

  #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div:hover > h3 {
    color: #fff !important;
    background-size: 100% 82%;
  }
}

#dc-root [style*="border-top:1px solid #2c2c2e"],
#dc-root [style*="border-top:1px solid #262627"] {
  border-top-color: var(--case-line) !important;
  border-top-style: dashed !important;
}

#dc-root [style*="border:1px solid #2c2c2e"],
#dc-root [style*="border:1px solid #262627"] {
  border: 1px dashed var(--case-line) !important;
}

#dc-root [style*="background:rgba(0,0,0,.2)"],
#dc-root [style*="background:rgba(0,0,0,.25)"] {
  background: var(--case-black-raised) !important;
}

#dc-root image-slot,
#dc-root video,
#dc-root iframe {
  position: relative;
  z-index: 1;
}

#dc-root section[data-screen-label] > [style*="aspect-ratio"],
#dc-root section[data-screen-label] > [style*="height:clamp"] {
  border: 1px dashed var(--case-line) !important;
}

/* Project cards echo the homepage's paper cards and orange hover highlight. */
#dc-root section[data-screen-label="Next project"] {
  padding-bottom: clamp(80px, 10vw, 140px) !important;
}

#dc-root section[data-screen-label="Next project"] > div:first-child {
  flex-basis: 100% !important;
  color: var(--case-orange) !important;
  text-align: center;
}

#dc-root section[data-screen-label="Next project"] > div:nth-child(2) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 30px) !important;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) {
  isolation: isolate;
  color: var(--case-black) !important;
  background: var(--case-paper) !important;
  border: 1px dashed rgba(10, 10, 10, 0.34) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(0);
  transition: transform 220ms var(--case-ease), border-color 220ms ease, box-shadow 220ms ease !important;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::before,
#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::after {
  position: absolute;
  z-index: 4;
  width: 12px;
  height: 12px;
  content: "";
  pointer-events: none;
  background: rgba(10, 10, 10, 0.62);
  clip-path: polygon(44% 0, 56% 0, 61% 38%, 100% 44%, 100% 56%, 61% 61%, 56% 100%, 44% 100%, 39% 61%, 0 56%, 0 44%, 39% 38%);
  transition: background 180ms ease;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::before { top: -6px; left: -6px; }
#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::after { right: -6px; bottom: -6px; }

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) > div:first-child {
  margin: clamp(9px, 0.8vw, 13px);
  border-bottom: 1px dashed rgba(10, 10, 10, 0.22);
  background: #fdfcf8;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) > div:last-child {
  align-items: center;
  text-align: center;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover,
#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible {
  border-color: var(--case-orange) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) h3 {
  color: var(--case-black) !important;
  transition: color 180ms ease;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover h3,
#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible h3 {
  color: var(--case-orange) !important;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) span,
#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) div {
  color: #66625d !important;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) span:last-child {
  display: inline-grid;
  place-items: center;
  width: min(100%, 220px);
  min-height: 48px;
  margin-top: 4px;
  background: url("./assets/project-cards/case-study-scribble-14.png") center / contain no-repeat;
  color: var(--case-black) !important;
}

#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover span:last-child,
#dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible span:last-child {
  color: var(--case-orange) !important;
}

#dc-root footer,
#dc-root [data-screen-label="Footer bar"] {
  color: var(--case-grey) !important;
  background: var(--case-black) !important;
  border-top: 1px dashed var(--case-line) !important;
  font-family: var(--case-mono) !important;
}

/*
 * PUBG pilot: use only the homepage patterns that truly repeat.
 * The story stays on one continuous black field; paper is reserved for media,
 * orange for interaction/emphasis, and dashed rules for construction structure.
 */
body.case-study-pilot #dc-root section[data-screen-label]::before,
body.case-study-pilot #dc-root section[data-screen-label]::after,
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div::before,
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div::after,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::before,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::after {
  display: none !important;
}

body.case-study-pilot #dc-root section[data-screen-label] {
  scroll-margin-top: 96px;
}

body.case-study-pilot #dc-root h1,
body.case-study-pilot #dc-root h2,
body.case-study-pilot #dc-root h3 {
  font-variation-settings: "wght" 700;
  font-weight: 700 !important;
}

body.case-study-pilot #dc-root h1 {
  font-size: var(--case-type-display) !important;
  line-height: var(--case-leading-display) !important;
}

body.case-study-pilot #dc-root h2 {
  font-size: var(--case-type-section) !important;
  line-height: var(--case-leading-display) !important;
}

body.case-study-pilot #dc-root h3 {
  font-size: var(--case-type-heading) !important;
  line-height: var(--case-leading-heading) !important;
}

body.case-study-pilot #dc-root .blur-highlight {
  --blur-highlight-progress: 0%;
  --blur-highlight-color: rgba(238, 100, 34, 0.92);
  display: inline;
  padding-inline: 0.035em;
  margin-inline: -0.035em;
  background-image: linear-gradient(90deg, var(--blur-highlight-color), var(--blur-highlight-color));
  background-repeat: no-repeat;
  background-position: left 60%;
  background-size: var(--blur-highlight-progress) 82%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  will-change: filter, opacity, background-size;
}

@media (prefers-reduced-motion: reduce) {
  body.case-study-pilot #dc-root .blur-highlight {
    --blur-highlight-progress: 100%;
    color: #fff;
    filter: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

body.case-study-pilot #dc-root section[data-screen-label]:not([data-screen-label="Hero"]) {
  row-gap: clamp(18px, 2vw, 26px) !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] > div:first-child::after {
  display: none;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] {
  justify-items: center;
  text-align: center;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] > h1 {
  width: 100%;
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] > p {
  margin-inline: auto !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] + div {
  position: relative;
  overflow: visible !important;
}

body.case-study-pilot #dc-root .case-hero-tape {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  display: block;
  width: clamp(104px, 12vw, 174px);
  height: auto;
  max-width: 34%;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22));
  transform: translate(-50%, -52%) rotate(-1.5deg);
  transform-origin: center;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] + div + div {
  padding: clamp(18px, 2.4vw, 28px) 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.case-study-pilot #dc-root .case-responsibilities {
  display: grid !important;
  justify-items: center;
  gap: clamp(10px, 1.5vw, 16px) !important;
  width: 100%;
  text-align: center;
}

body.case-study-pilot #dc-root .case-responsibilities__label {
  color: #fff !important;
  font-family: var(--case-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.04em !important;
}

body.case-study-pilot #dc-root .case-responsibilities__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2.6vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.case-study-pilot #dc-root .case-responsibilities__list li {
  padding: 0;
  color: var(--case-cream);
  border: 0;
  background: transparent;
  font-family: var(--case-body);
  font-size: var(--case-type-body);
  line-height: var(--case-leading-body);
  letter-spacing: 0;
  text-transform: none;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] > div:first-child,
body.case-study-pilot #dc-root section[data-screen-label="Hero"] + div + div > div > div > div:first-child,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) > div:last-child > div:first-child {
  display: none !important;
}

body.case-study-pilot #dc-root .case-media-label {
  display: none !important;
}

body.case-study-pilot #dc-root section[data-screen-label]:not([data-screen-label="Hero"]) > div:first-child {
  display: block !important;
  flex: 1 1 100% !important;
  width: 100%;
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--case-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  text-transform: uppercase;
}

body.case-study-pilot #dc-root p,
body.case-study-pilot #dc-root .case-decision-grid > div > div,
body.case-study-pilot #dc-root .case-decision-grid > div > div > div,
body.case-study-pilot #dc-root [data-stat] > div:last-child {
  font-size: var(--case-type-body) !important;
  line-height: var(--case-leading-body) !important;
  text-align: center !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] > p,
body.case-study-pilot #dc-root section[data-screen-label="Challenge"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Execution"] > p {
  width: 100%;
  max-width: 78ch !important;
  flex-basis: 100% !important;
  margin-inline: auto !important;
  color: rgba(243, 239, 230, 0.76) !important;
  font-size: var(--case-type-body) !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Challenge"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > h2 {
  margin-top: 0 !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] {
  margin-block: 0 !important;
  color: var(--case-cream) !important;
  border-top: 1px dashed var(--case-line) !important;
  border-radius: 0;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) h2 {
  width: 100%;
  max-width: none !important;
  color: var(--case-cream) !important;
  background-image: none;
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > div {
  width: 100%;
  max-width: none !important;
  color: rgba(243, 239, 230, 0.76) !important;
}
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > div > p {
  max-width: 78ch !important;
  margin-inline: auto !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div {
  border-color: rgba(243, 239, 230, 0.28) !important;
  background: #10100f !important;
  transition: none !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div > h3 {
  width: 100%;
  margin-inline: 0 !important;
  text-align: center;
  background-image: none !important;
  transition: none !important;
}

@media (hover: hover) {
  body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div:hover {
    border-color: rgba(243, 239, 230, 0.28) !important;
    background: #10100f !important;
    transform: none;
  }

  body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div:hover > h3 {
    color: var(--case-cream) !important;
    background-size: 0% 82%;
  }
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-chapter-media {
  margin-top: clamp(12px, 2.4vw, 32px);
}

body.case-study-pilot #dc-root section[data-screen-label="Challenge"] > div:last-child,
body.case-study-pilot #dc-root section[data-screen-label="Process"] > div:nth-child(2),
body.case-study-pilot #dc-root section[data-screen-label="Execution"] > div[style*="height:clamp"] {
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  box-sizing: border-box;
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > .case-chapter-media {
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  transform: none;
}

body.case-study-pilot #dc-root .case-constraint-card,
body.case-study-pilot #dc-root .case-constraint-solution {
  align-items: center;
  text-align: center;
}

body.case-study-pilot #dc-root .case-constraint-card > h3,
body.case-study-pilot #dc-root .case-constraint-solution,
body.case-study-pilot #dc-root .case-constraint-solution > div:first-child {
  width: 100%;
  text-align: center;
}

body.case-study-pilot #dc-root .case-stat-callout {
  min-height: clamp(46px, 7vw, 104px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.case-study-pilot #dc-root .case-stat-callout > span {
  width: fit-content;
  margin-inline: auto;
  padding: 0;
  color: #fff !important;
  background: none;
  font-family: var(--case-display) !important;
  font-size: clamp(1.9rem, 1.35rem + 1.7vw, 3.5rem) !important;
  font-variation-settings: "wght" 700;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

/* Exact dark-mode translation of the homepage's More Work card interaction. */
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  color: var(--case-cream) !important;
  border-color: rgba(243, 239, 230, 0.3) !important;
  background: #10100f !important;
  box-shadow: none;
  transform: translateY(0);
  transition: transform 260ms var(--case-ease), background 220ms ease, border-color 220ms ease !important;
}

body.case-study-pilot #dc-root .case-project-corner {
  position: absolute;
  z-index: 6;
  width: 12px;
  height: 12px;
  color: rgba(243, 239, 230, 0.72) !important;
  pointer-events: none;
  transition: color 220ms ease !important;
}

body.case-study-pilot #dc-root .case-project-corner::before {
  position: absolute;
  inset: 0;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-4deg);
}

body.case-study-pilot #dc-root .case-project-corner--top-left {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

body.case-study-pilot #dc-root .case-project-corner--top-right {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

body.case-study-pilot #dc-root .case-project-corner--bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

body.case-study-pilot #dc-root .case-project-corner--bottom-right {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) > div:first-child {
  padding: 0;
  border-bottom: 0;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) image-slot {
  transform: none;
  transition: transform 420ms var(--case-ease), filter 320ms ease;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) h3 {
  position: relative;
  z-index: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0.02em 0.14em 0.08em;
  color: var(--case-cream) !important;
  font-family: var(--case-body) !important;
  font-size: var(--case-type-card-title) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  text-align: center;
  background-image: linear-gradient(90deg, var(--case-orange), var(--case-orange));
  background-repeat: no-repeat;
  background-position: left 58%;
  background-size: 0% 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 120ms ease, background-size 180ms var(--case-ease);
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) span,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) div {
  color: rgba(243, 239, 230, 0.72) !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) span:last-child {
  color: var(--case-cream) !important;
  background: none;
  transition: none;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) span:last-child::before {
  display: none !important;
}

body.case-study-pilot #dc-root .case-project-view {
  position: relative;
  display: inline-grid !important;
  grid-template-columns: auto;
  align-items: center;
  justify-items: center;
  justify-content: center;
  width: min(100%, clamp(150px, 14vw, 210px));
  aspect-ratio: 1000 / 222;
  margin: 4px auto 0;
  padding: 0 clamp(24px, 2vw, 34px);
  color: var(--case-cream) !important;
  font: 700 clamp(12px, 0.82vw, 13px)/1 var(--case-mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  isolation: isolate;
  transition: color 180ms ease, transform 180ms var(--case-ease) !important;
}

body.case-study-pilot #dc-root .case-project-view > img {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: invert(1);
  transform: rotate(-0.5deg) scale(1.03, 1.02);
  transform-origin: center;
  transition: transform 220ms var(--case-ease), filter 220ms ease;
}

body.case-study-pilot #dc-root .case-project-view > span {
  position: relative;
  z-index: 1;
  top: clamp(1px, 0.2vw, 3px);
  color: inherit !important;
  white-space: nowrap;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] > div:last-child {
  width: 100%;
  text-align: center !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] > div:last-child > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible {
  border-color: var(--case-orange) !important;
  background: #17100c !important;
  box-shadow: none;
  transform: translateY(-4px);
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover .case-project-corner,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible .case-project-corner {
  color: var(--case-orange) !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover .case-project-view,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible .case-project-view {
  transform: translateY(-1px);
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover .case-project-view > img,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible .case-project-view > img {
  filter: invert(43%) sepia(99%) saturate(3525%) hue-rotate(5deg) brightness(101%) contrast(99%);
  transform: rotate(0.25deg) scale(1.065, 1.06);
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible {
  outline: 3px solid var(--case-orange);
  outline-offset: 4px;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover h3,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible h3 {
  color: #fff !important;
  background-size: 100% 88%;
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover image-slot,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible image-slot {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.045);
}

body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):hover span:last-child,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark):focus-visible span:last-child {
  color: var(--case-cream) !important;
  transform: none;
}

/*
 * Collection pages: the three "More ways the work takes shape" routes use
 * the same dark process-book language while keeping every mini case study in
 * its own calm, non-interactive card.
 */
body.case-study-collection #dc-root,
body.case-study-collection #dc-root *,
body.case-study-collection #dc-root *::before,
body.case-study-collection #dc-root *::after {
  box-sizing: border-box;
}

body.case-study-collection #dc-root h1,
body.case-study-collection #dc-root h2,
body.case-study-collection #dc-root h3,
body.case-study-collection #dc-root p,
body.case-study-collection #dc-root span {
  min-width: 0;
  overflow-wrap: break-word;
}

body.case-study-collection #dc-root .blur-highlight {
  will-change: filter, opacity, background-size;
}

body.case-study-collection #dc-root .case-collection-hero {
  min-height: clamp(430px, 56vw, 720px);
  align-content: center;
  justify-items: center;
  text-align: center;
}

body.case-study-collection #dc-root .case-collection-hero > h1,
body.case-study-collection #dc-root .case-collection-hero > p,
body.case-study-collection #dc-root .case-collection-intro > h2,
body.case-study-collection #dc-root .case-collection-intro > p,
body.case-study-collection #dc-root .case-collection-studies > h2,
body.case-study-collection #dc-root .case-collection-gallery > h2,
body.case-study-collection #dc-root .case-collection-closing > p {
  width: 100%;
  max-width: 62ch !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body.case-study-collection #dc-root .case-collection-studies > h2,
body.case-study-collection #dc-root .case-collection-gallery > h2 {
  max-width: 20ch !important;
  margin-top: clamp(14px, 2vw, 24px) !important;
  margin-bottom: clamp(42px, 6vw, 78px) !important;
}

/* The three additional-work collections use the same typography hierarchy as
 * the long-form case studies: display headings, body sans, mono labels. */
body.case-study-collection #dc-root h1,
body.case-study-collection #dc-root h2,
body.case-study-collection #dc-root h3 {
  font-family: var(--case-display) !important;
  text-wrap: balance;
}

body.case-study-collection #dc-root h1 {
  font-size: clamp(48px, 7vw, 108px) !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.052em !important;
}

body.case-study-collection #dc-root h2 {
  font-size: clamp(48px, 5.4vw, 80px) !important;
  font-weight: 760 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.038em !important;
}

body.case-study-collection #dc-root h3 {
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 740 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}

body.case-study-collection #dc-root p,
body.case-study-collection #dc-root blockquote,
body.case-study-collection #dc-root li {
  font-family: var(--case-body) !important;
  font-size: var(--case-type-body) !important;
  font-weight: 400 !important;
  line-height: var(--case-leading-body) !important;
  letter-spacing: 0 !important;
}

body.case-study-collection #dc-root .case-collection-intro,
body.case-study-collection #dc-root .case-collection-closing {
  padding-block: clamp(72px, 9vw, 128px) !important;
}

body.case-study-collection #dc-root .case-collection-intro > h2,
body.case-study-collection #dc-root .case-collection-closing > p {
  max-width: 24ch !important;
}

body.case-study-collection #dc-root .case-collection-intro > p {
  max-width: 62ch !important;
}

body.case-study-collection #dc-root .case-mini-study {
  --case-mini-padding: clamp(32px, 4vw, 58px);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(42px, 6vw, 78px);
  padding: var(--case-mini-padding) !important;
  border: 1px dashed rgba(243, 239, 230, 0.3) !important;
  background-color: #10100f;
  background-image:
    radial-gradient(circle, rgba(243, 239, 230, 0.055) 0 0.55px, transparent 0.9px),
    radial-gradient(circle, rgba(243, 239, 230, 0.025) 0 0.45px, transparent 0.8px);
  background-position: 0 0, 17px 13px;
  background-size: 43px 43px, 71px 71px;
}

body.case-study-collection #dc-root .case-mini-study::before {
  position: absolute;
  z-index: 5;
  inset: -7px;
  display: block;
  width: auto;
  height: auto;
  content: "";
  pointer-events: none;
  opacity: 0.78;
  clip-path: none;
  background-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E");
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

body.case-study-collection #dc-root .case-mini-study::after {
  display: none;
}

body.case-study-collection #dc-root .case-mini-study > div:first-child {
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px) !important;
}

body.case-study-collection #dc-root .case-mini-study > div:first-child h2,
body.case-study-collection #dc-root .case-mini-study > div:first-child > div:first-child,
body.case-study-collection #dc-root .case-mini-study > div:first-child > div:first-child > div,
body.case-study-collection #dc-root .case-mini-study > div:first-child > div:first-child > p {
  width: 100%;
  max-width: 28ch !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body.case-study-collection #dc-root .case-mini-study > div:first-child h2 {
  color: var(--case-cream) !important;
  font-size: clamp(48px, 5.4vw, 80px) !important;
  font-weight: 760 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.038em !important;
}

body.case-study-collection #dc-root .case-mini-study > div:first-child > div:nth-child(2) {
  width: 100%;
}

/* Branding mini studies use a single, paced reading column instead of a
 * three-up copy grid. The narrower measure keeps each thought easy to scan. */
body.case-study-collection #dc-root .brand-mini-study-facts {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-self: stretch;
  width: auto !important;
  margin-inline: calc(0px - var(--case-mini-padding));
}

body.case-study-collection #dc-root .case-mini-study > div:first-child > div.brand-mini-study-heading,
body.case-study-collection #dc-root .case-mini-study > div:first-child > div.brand-mini-study-heading h2,
body.case-study-collection #dc-root .case-mini-study > div:first-child > div.brand-mini-study-heading > div {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* Match the Branding mini studies to the typography hierarchy used by the
 * long-form case studies: display face, mono metadata, body sans-serif. */
body.case-study-collection #dc-root .brand-page-heading,
body.case-study-collection #dc-root .brand-mini-study-heading h2 {
  font-family: var(--case-body) !important;
}

body.case-study-collection #dc-root .brand-mini-study-heading h2 {
  font-size: clamp(48px, 5.4vw, 80px) !important;
  font-weight: 800 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.04em !important;
  overflow-wrap: normal;
  word-break: normal;
}

/* Dynamic collection values render inside .sc-interp spans. Keep those
 * wrappers typographically transparent so headings and body copy inherit the
 * same sans-serif hierarchy as the homepage instead of the label face. */
body.case-study-collection #dc-root .case-mini-study > div:first-child > div.brand-mini-study-heading h2 > span.sc-interp,
body.case-study-collection #dc-root .case-mini-study > div:first-child .brand-mini-study-fact p > span.sc-interp {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

body.case-study-collection #dc-root .brand-mini-study-heading {
  align-self: stretch;
  width: auto !important;
  margin-inline: calc(0px - var(--case-mini-padding)) !important;
  padding-inline: clamp(18px, 3vw, 36px);
}

body.case-study-collection #dc-root .brand-mini-study-heading > div {
  padding-inline: clamp(12px, 2vw, 24px);
  color: #fff !important;
  font-family: var(--case-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.04em !important;
  text-wrap: balance;
}

body.case-study-collection #dc-root .brand-mini-study-fact {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  gap: 8px !important;
  padding-block: clamp(18px, 2.4vw, 28px) !important;
}

body.case-study-collection #dc-root .brand-mini-study-fact:last-child {
  border-bottom: 1px dashed rgba(243, 239, 230, 0.18);
}

body.case-study-collection #dc-root .brand-mini-study-fact p {
  width: 100%;
  max-width: 70ch !important;
  margin-inline: auto !important;
  font-family: var(--case-body) !important;
  font-size: var(--case-type-body) !important;
  font-weight: 400 !important;
  line-height: var(--case-leading-body) !important;
  letter-spacing: 0 !important;
}

body.case-study-collection #dc-root .brand-outcome-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  width: min(100%, 780px);
  margin: clamp(6px, 1.2vw, 14px) auto clamp(10px, 1.5vw, 18px);
}

body.case-study-collection #dc-root .brand-outcome-metric {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(150px, 18vw, 210px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(22px, 3vw, 34px) clamp(14px, 2vw, 24px);
  overflow: hidden;
  border: 0;
  background: none;
}

body.case-study-collection #dc-root .brand-outcome-number {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 0;
  color: #fff;
  background: none;
  font-family: var(--case-display) !important;
  font-size: clamp(2.7rem, 2rem + 3vw, 5.75rem);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

body.case-study-collection #dc-root .brand-outcome-label {
  margin-top: 14px;
  color: var(--case-cream);
  font-family: var(--case-body) !important;
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.25rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
}

body.case-study-collection #dc-root .brand-outcome-context {
  margin-top: 6px;
  color: var(--case-grey);
  font-family: var(--case-body) !important;
  font-size: clamp(0.75rem, 0.72rem + 0.14vw, 0.875rem);
  font-weight: 400;
  line-height: 1.35;
}

body.case-study-collection #dc-root .case-mini-study > div:first-child .brand-outcome-label > span.sc-interp,
body.case-study-collection #dc-root .case-mini-study > div:first-child .brand-outcome-context > span.sc-interp {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

body.case-study-collection #dc-root .case-mini-study > div:first-child > div:nth-child(2) > div {
  align-items: center !important;
  justify-content: center;
  padding: clamp(16px, 2vw, 24px);
  border-top: 1px dashed rgba(243, 239, 230, 0.18);
  text-align: center;
}

body.case-study-collection #dc-root .case-mini-study > div:first-child span,
body.case-study-collection #dc-root .case-mini-study > div[style*="margin:18px"] > span {
  flex-basis: auto !important;
  color: #fff !important;
  font-family: var(--case-mono) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

body.case-study-collection #dc-root .case-mini-study > div[style*="margin:18px"] {
  justify-content: center;
  text-align: center;
}

/* Pitch Strategy uses a paced, full-width reading order: context, artifact,
 * decisions, second artifact, then outcome. */
body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead,
body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead > div:first-child,
body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead > div:first-child > h2,
body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead > div:first-child > div,
body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead > div:first-child > p {
  width: 100% !important;
  max-width: none !important;
}

body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead > div:first-child > p {
  max-width: 70ch !important;
}

body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead > div:first-child > h2 > span.sc-interp,
body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead > div:first-child > p > span.sc-interp,
body.case-study-collection #dc-root .case-mini-study > div.pitch-mini-study-lead .pitch-mini-study-stat > p > span.sc-interp {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

body.case-study-collection #dc-root .pitch-mini-study-lead .pitch-mini-study-stat {
  width: min(100%, 58ch);
  margin-inline: auto !important;
  align-items: center;
  padding: clamp(24px, 3vw, 34px) clamp(18px, 2vw, 28px) !important;
  border-right: 2px solid var(--case-orange);
  text-align: center;
}

body.case-study-collection #dc-root .pitch-mini-study-lead .pitch-stat-number {
  width: fit-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 0;
  color: #fff;
  background: none;
  font-family: var(--case-display) !important;
  font-size: clamp(2.7rem, 2rem + 3vw, 5.75rem) !important;
  font-variation-settings: "wght" 700;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap;
}

body.case-study-collection #dc-root .pitch-slide-samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
}

body.case-study-collection #dc-root .pitch-slide-samples > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

body.case-study-collection #dc-root .pitch-mini-study-points > div > span {
  color: #fff !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

body.case-study-collection #dc-root .case-mini-study image-slot,
body.case-study-collection #dc-root .case-mini-study video,
body.case-study-collection #dc-root .case-mini-study iframe {
  border: 0 !important;
}

body.case-study-collection #dc-root .case-collection-framework {
  gap: clamp(16px, 1.8vw, 28px) !important;
  width: 100%;
}

body.case-study-collection #dc-root .case-collection-framework > div {
  min-height: clamp(240px, 24vw, 330px);
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3vw, 38px) !important;
  border: 1px dashed rgba(243, 239, 230, 0.3) !important;
  background: #10100f !important;
  text-align: center;
}

body.case-study-collection #dc-root .case-collection-framework > div h3,
body.case-study-collection #dc-root .case-collection-framework > div p {
  width: 100%;
  text-align: center !important;
}

body.case-study-collection #dc-root .case-collection-gallery > h2 {
  margin-top: 0 !important;
}

body.case-study-collection #dc-root .case-campaign-grid {
  column-gap: clamp(18px, 2vw, 28px) !important;
  margin-top: clamp(34px, 5vw, 64px);
}

body.case-study-collection #dc-root .case-campaign-grid > div {
  position: relative;
  margin-bottom: clamp(18px, 2vw, 28px) !important;
  padding: clamp(7px, 0.7vw, 11px);
  border: 1px dashed rgba(10, 10, 10, 0.34);
  background: var(--case-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

body.case-study-collection #dc-root .case-collection-hero-media {
  width: min(calc(100% - (2 * var(--case-gutter))), var(--case-max));
  height: clamp(330px, 52vw, 780px) !important;
  margin: 0 auto clamp(54px, 8vw, 112px) !important;
  padding: clamp(8px, 1vw, 14px);
  overflow: visible !important;
  box-sizing: border-box;
  background: var(--case-paper) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
  transform: rotate(-0.18deg);
}

body.case-study-collection #dc-root .case-collection-hero-media > image-slot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.case-study-collection #dc-root .case-collection-hero-media > div:not(.case-hero-tape) {
  overflow: hidden;
}

body.case-study-collection #dc-root .case-collection-hero-crop,
body.case-study-collection #dc-root .pitch-mini-study-primary-media {
  contain: paint;
}

body.case-study-collection #dc-root .case-collection-hero-media .case-hero-tape {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  display: block;
  width: clamp(104px, 12vw, 174px);
  height: auto;
  max-width: 34%;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22));
  transform: translate(-50%, -52%) rotate(-1.5deg);
}

body.case-study-collection #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::before,
body.case-study-collection #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::after {
  display: block !important;
}

body.case-study-collection #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) > div:last-child {
  min-height: 92px;
  justify-content: center;
}

@media (max-width: 820px) {
  :root {
    --case-gutter: 18px;
  }

  body {
    background-attachment: scroll, scroll !important;
  }

  #dc-root header:first-of-type,
  #dc-root header:first-of-type > div {
    min-height: 68px;
  }

  #dc-root header:first-of-type > div {
    padding-block: 11px !important;
  }

  body.case-study-pilot #dc-root .site-header {
    min-height: 68px;
    padding-block: 11px !important;
  }

  body.case-study-pilot #dc-root .site-header > .wordmark {
    position: relative;
    z-index: 2;
    gap: 6px;
  }

  body.case-study-pilot #dc-root .site-header > .wordmark .nav-role,
  body.case-study-pilot #dc-root .site-header > .wordmark .nav-role > span {
    font-size: 12px !important;
  }

  body.case-study-pilot #dc-root .menu-toggle {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: block;
    padding: 10px;
    color: inherit !important;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  body.case-study-pilot #dc-root .menu-toggle span:not(.sr-only) {
    display: block;
    height: 2px;
    margin: 6px 0;
    background: currentColor !important;
    transition: transform 250ms ease, opacity 250ms ease;
  }

  body.case-study-pilot #dc-root .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  body.case-study-pilot #dc-root .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  body.case-study-pilot #dc-root .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  body.case-study-pilot #dc-root .site-nav {
    /* The transformed header is the containing block. Keep the menu below it,
       with a scrollable viewport-height panel, including phone landscape. */
    position: absolute;
    inset: 100% 0 auto;
    height: calc(100svh - 68px);
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    display: grid;
    place-content: center;
    gap: 16px !important;
    color: var(--case-grey) !important;
    background: rgba(13, 13, 11, 0.98) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
  }

  body.case-study-pilot #dc-root .site-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  body.case-study-pilot #dc-root .site-nav a,
  body.case-study-pilot #dc-root .site-nav a[href$="#case-studies"] {
    font-size: 22px !important;
    text-align: center;
  }

  #dc-root h1 {
    font-size: clamp(44px, 13vw, 72px) !important;
    line-height: 0.96 !important;
  }

  #dc-root h2 {
    font-size: clamp(42px, 11vw, 64px) !important;
  }

  #dc-root section[data-screen-label="Alignment move"] {
    padding: 58px clamp(18px, 6vw, 34px) 66px !important;
    border-radius: 24px 24px 3px 3px;
  }

  #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid,
  #dc-root section[data-screen-label="Next project"] > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }

  #dc-root section[data-screen-label="Alignment move"] > .case-decision-grid > div {
    min-height: 260px;
  }

  #dc-root section[data-screen-label="Hero"] {
    min-height: 360px;
    padding-inline: 24px !important;
  }

  #dc-root section[data-screen-label="Hero"] + div {
    height: clamp(280px, 74vw, 520px) !important;
  }

  #dc-root section[data-screen-label]::before,
  #dc-root section[data-screen-label]::after {
    width: 10px;
    height: 10px;
  }

  body.case-study-collection #dc-root .case-collection-hero {
    min-height: clamp(390px, 92vw, 560px);
  }

  body.case-study-collection #dc-root .case-mini-study {
    --case-mini-padding: clamp(26px, 7vw, 38px);
    margin-bottom: 30px;
    padding: var(--case-mini-padding) !important;
    border-radius: 18px;
  }

  body.case-study-collection #dc-root .case-mini-study > div:first-child > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }

  body.case-study-collection #dc-root .brand-outcome-metrics {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
  }

  body.case-study-collection #dc-root .brand-outcome-metric {
    min-height: 150px;
  }

  body.case-study-collection #dc-root .pitch-slide-samples {
    grid-template-columns: 1fr;
  }

  body.case-study-collection #dc-root .case-campaign-grid {
    columns: 2 !important;
    column-gap: 12px !important;
  }
  body.case-study-collection #dc-root .case-campaign-grid > div {
    margin-bottom: 12px !important;
  }

  body.case-study-collection #dc-root .case-collection-hero-media {
    width: calc(100% - 36px);
    height: clamp(280px, 74vw, 520px) !important;
    padding: 7px;
  }
}

@media (max-width: 520px) {
  #dc-root header:first-of-type nav a {
    min-height: 48px;
  }

  #dc-root section[data-screen-label]:not([data-screen-label="Hero"]) {
    width: calc(100% - 24px) !important;
  }

  #dc-root section[data-screen-label="Hero"] + div {
    width: calc(100% - 24px) !important;
    padding: 6px;
  }

  #dc-root section[data-screen-label="Hero"] + div + div {
    width: calc(100% - 24px) !important;
  }
}

/* Approved cross-page system pass: one hierarchy, one reading rhythm, and one
 * construction language across long-form and collection case studies. */
body.case-study-pilot #dc-root h1,
body.case-study-pilot #dc-root h2,
body.case-study-pilot #dc-root h3,
body.case-study-collection #dc-root .brand-page-heading,
body.case-study-collection #dc-root .brand-mini-study-heading h2,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) h3 {
  font-family: var(--case-display) !important;
  font-variation-settings: "wght" 700;
}

body.case-study-pilot #dc-root h1,
body.case-study-collection #dc-root h1 {
  font-size: var(--case-type-display) !important;
  line-height: var(--case-leading-display) !important;
}

body.case-study-pilot #dc-root h2,
body.case-study-collection #dc-root h2 {
  font-size: var(--case-type-section) !important;
  line-height: var(--case-leading-display) !important;
}

body.case-study-pilot #dc-root h3,
body.case-study-collection #dc-root h3 {
  font-size: var(--case-type-heading) !important;
  line-height: var(--case-leading-heading) !important;
}

body.case-study-pilot #dc-root .case-hero-lede {
  width: 100%;
  max-width: 78ch !important;
  margin: clamp(24px, 3vw, 38px) auto 0 !important;
  color: rgba(243, 239, 230, 0.76) !important;
  font-family: var(--case-body) !important;
  font-size: var(--case-type-body-lg) !important;
  line-height: var(--case-leading-body) !important;
  text-align: center !important;
  text-wrap: pretty;
}

/* Keep short framing copy centered. Longer narrative and card copy uses a
 * readable left-aligned measure while its container still spans the grid. */
body.case-study-pilot #dc-root .case-decision-grid > div,
body.case-study-pilot #dc-root .case-constraint-card,
body.case-study-collection #dc-root .case-collection-framework > div,
body.case-study-collection #dc-root .brand-mini-study-fact,
body.case-study-collection #dc-root .pitch-mini-study-points > div,
body.case-study-collection #dc-root .pitch-mini-study-result {
  align-items: flex-start !important;
  text-align: left !important;
}

body.case-study-pilot #dc-root .case-decision-grid > div > h3,
body.case-study-pilot #dc-root .case-decision-grid > div > p,
body.case-study-pilot #dc-root .case-constraint-card > h3,
body.case-study-pilot #dc-root .case-constraint-card > p,
body.case-study-pilot #dc-root .case-constraint-solution,
body.case-study-pilot #dc-root .case-constraint-solution > div:first-child,
body.case-study-pilot #dc-root .case-constraint-solution > p,
body.case-study-collection #dc-root .case-collection-framework > div h3,
body.case-study-collection #dc-root .case-collection-framework > div p,
body.case-study-collection #dc-root .brand-mini-study-fact > span,
body.case-study-collection #dc-root .brand-mini-study-fact > p,
body.case-study-collection #dc-root .pitch-mini-study-points > div > span,
body.case-study-collection #dc-root .pitch-mini-study-points > div > p,
body.case-study-collection #dc-root .pitch-mini-study-result > span,
body.case-study-collection #dc-root .pitch-mini-study-result > p {
  width: 100%;
  max-width: 70ch !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Challenge"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Execution"] > p {
  max-width: 78ch !important;
  text-align: center !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > p,
body.case-study-collection #dc-root .case-collection-intro > p {
  max-width: 78ch !important;
  text-align: center !important;
}

/* Four registration stars identify contained cards. They stay static on
 * informational cards and change color only on interactive project cards. */
body.case-study-pilot #dc-root .case-decision-grid > div,
body.case-study-pilot #dc-root .case-constraint-card,
body.case-study-collection #dc-root .case-collection-framework > div,
body.case-study-collection #dc-root .case-mini-study,
body.case-study-collection #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark) {
  position: relative;
  border-radius: 0 !important;
}

body.case-study-pilot #dc-root .case-decision-grid > div::before,
body.case-study-pilot #dc-root .case-constraint-card::before,
body.case-study-collection #dc-root .case-collection-framework > div::before,
body.case-study-collection #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::before {
  position: absolute;
  z-index: 6;
  inset: -7px;
  display: block !important;
  width: auto;
  height: auto;
  content: "";
  pointer-events: none;
  opacity: 0.78;
  clip-path: none;
  background-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5C13.5 0.7 13.7 6.7 14.6 8.8C16.8 9.5 23.1 9.6 23.5 11.4C23.5 13 17.2 13.7 14.8 14.5C14.1 16.8 13.8 23.3 12.1 23.5C10.4 23.4 10 17.1 9.3 14.8C6.9 14.1 0.6 13.8 0.5 12.1C0.6 10.4 6.6 9.8 8.9 9.1C9.5 6.6 10.2 0.5 12 0.5Z' fill='%23f3efe6'/%3E%3C/svg%3E");
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

body.case-study-pilot #dc-root .case-decision-grid > div::after,
body.case-study-pilot #dc-root .case-constraint-card::after,
body.case-study-collection #dc-root .case-collection-framework > div::after,
body.case-study-collection #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark)::after {
  display: none !important;
}

body.case-study-pilot #dc-root section[data-screen-label="Hero"] + div,
body.case-study-collection #dc-root .case-collection-hero-media,
body.case-study-pilot #dc-root section[data-screen-label="Next project"] a[href$=".dc.html"]:not(.wordmark),
body.case-study-collection #dc-root .case-campaign-grid > div {
  border-radius: 0 !important;
}

/* Compact homepage-style contact prompt for every work route. */
body.case-study-pilot #dc-root .case-contact-cta {
  width: min(calc(100% - (2 * var(--case-gutter))), var(--case-max));
  max-width: var(--case-max);
  min-height: 0;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin: 0 auto;
  padding: clamp(58px, 8vw, 96px) var(--case-pad);
  box-sizing: border-box;
  border-top: 1px dashed var(--case-line);
  text-align: center;
}

body.case-study-pilot #dc-root .case-contact-cta h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.35rem, 1.85rem + 2.2vw, 5rem) !important;
  text-wrap: balance;
}

body.case-study-pilot #dc-root .case-contact-cta p {
  max-width: 42ch !important;
  margin: 0;
  color: var(--case-grey) !important;
  text-align: center !important;
}

body.case-study-pilot #dc-root .case-contact-cta__button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  color: #fff !important;
  border: 1px solid var(--case-orange);
  background: var(--case-orange);
  font-family: var(--case-body) !important;
  font-size: var(--case-type-body);
  font-weight: 700;
  line-height: 1;
  transition: color 180ms ease, background 180ms ease, transform 220ms var(--case-ease);
}

body.case-study-pilot #dc-root .case-contact-cta__button:hover,
body.case-study-pilot #dc-root .case-contact-cta__button:focus-visible {
  color: var(--case-orange) !important;
  background: transparent;
  transform: translateY(-2px);
}

body.case-study-pilot #dc-root .case-contact-cta__button:focus-visible {
  outline: 3px solid var(--case-orange);
  outline-offset: 4px;
}

/* Mini-case-study labels and supporting copy share the same center axis. */
body.case-study-collection #dc-root .brand-mini-study-fact > span,
body.case-study-collection #dc-root .pitch-mini-study-points > div > span,
body.case-study-collection #dc-root .pitch-mini-study-result > span {
  width: 100%;
  margin-inline: auto !important;
  text-align: center !important;
}

body.case-study-pilot #dc-root .case-decision-grid > div,
body.case-study-pilot #dc-root .case-constraint-card,
body.case-study-pilot #dc-root .case-constraint-solution,
body.case-study-collection #dc-root .case-collection-framework > div,
body.case-study-collection #dc-root .brand-mini-study-fact,
body.case-study-collection #dc-root .pitch-mini-study-points > div,
body.case-study-collection #dc-root .pitch-mini-study-result {
  align-items: center !important;
  text-align: center !important;
}

body.case-study-pilot #dc-root footer,
body.case-study-collection #dc-root footer {
  justify-content: center !important;
  text-align: center !important;
}

body.case-study-pilot #dc-root .case-decision-grid > div > h3,
body.case-study-pilot #dc-root .case-decision-grid > div > p,
body.case-study-pilot #dc-root .case-constraint-card > h3,
body.case-study-pilot #dc-root .case-constraint-card > p,
body.case-study-pilot #dc-root .case-constraint-solution,
body.case-study-pilot #dc-root .case-constraint-solution > div:first-child,
body.case-study-pilot #dc-root .case-constraint-solution > p,
body.case-study-collection #dc-root .case-collection-framework > div h3,
body.case-study-collection #dc-root .case-collection-framework > div p,
body.case-study-collection #dc-root .brand-mini-study-fact > p,
body.case-study-collection #dc-root .pitch-mini-study-points > div > p,
body.case-study-collection #dc-root .pitch-mini-study-result > p,
body.case-study-pilot #dc-root section[data-screen-label="Challenge"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Execution"] > p {
  margin-inline: auto !important;
  text-align: center !important;
}

@media (max-width: 820px) {
  #dc-root h1,
  body.case-study-pilot #dc-root h1,
  body.case-study-collection #dc-root h1 {
    font-size: var(--case-type-display) !important;
    line-height: var(--case-leading-display) !important;
  }

  #dc-root h2,
  body.case-study-pilot #dc-root h2,
  body.case-study-collection #dc-root h2 {
    font-size: var(--case-type-section) !important;
    line-height: var(--case-leading-display) !important;
  }

  body.case-study-collection #dc-root .case-mini-study {
    border-radius: 0 !important;
  }
}

/* Landscape phones: wide but only ~390px tall, so size from height, not width. */
@media (max-height: 480px) and (orientation: landscape) {
  :root {
    --case-type-display: clamp(2.25rem, 11svh, 2.75rem);
    --case-type-section: clamp(1.75rem, 8.5svh, 2.125rem);
    --case-type-heading: 1.25rem;
    --case-leading-display: 1.04;
  }
  body.case-study-collection #dc-root .brand-outcome-number,
  body.case-study-collection #dc-root .pitch-mini-study-lead .pitch-stat-number,
  body.case-study-pilot #dc-root [data-count] {
    font-size: clamp(2.25rem, 11svh, 2.75rem) !important;
  }
  body.case-study-pilot #dc-root .case-stat-callout > span {
    font-size: clamp(1.5rem, 7svh, 1.875rem) !important;
  }
  body.case-study-pilot #dc-root section[data-screen-label="Hero"],
  body.case-study-collection #dc-root .case-collection-hero {
    min-height: 0 !important;
    padding-top: calc(var(--header-height, 68px) + 32px) !important;
    padding-bottom: 32px !important;
  }
}

/* Phone headline scale: ~2.2× body at the top, one step down per level.
   Keeps the page title to 2–3 lines instead of filling the first screen. */
@media (max-width: 560px) {
  :root {
    --case-type-display: clamp(2.25rem, 1.6rem + 3.4vw, 2.75rem);
    --case-type-section: clamp(1.75rem, 1.35rem + 2.2vw, 2.125rem);
    --case-type-heading: 1.25rem;
    --case-leading-display: 1.04;
  }
  body.case-study-collection #dc-root .brand-outcome-number,
  body.case-study-collection #dc-root .pitch-mini-study-lead .pitch-stat-number,
  body.case-study-pilot #dc-root [data-count] {
    font-size: clamp(2.25rem, 1.6rem + 3.4vw, 2.75rem) !important;
  }
  body.case-study-pilot #dc-root .case-stat-callout > span {
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.875rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #dc-root *,
  #dc-root *::before,
  #dc-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ---- Text-style consistency pass -------------------------------------
   One body colour, one label treatment, one stat number face. */
body.case-study-pilot #dc-root p,
body.case-study-pilot #dc-root .case-decision-grid > div > p,
body.case-study-pilot #dc-root [data-stat] > div:last-child,
body.case-study-pilot #dc-root .case-contact-cta p {
  color: rgba(243, 239, 230, 0.76) !important;
}
body.case-study-pilot #dc-root section[data-screen-label] div[style*="DM Mono"],
body.case-study-pilot #dc-root .case-responsibilities__label {
  color: rgba(243, 239, 230, 0.6) !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
body.case-study-pilot #dc-root section[data-screen-label]:not([data-screen-label="Hero"]) > div:first-child {
  color: #fff !important;
}
body.case-study-pilot #dc-root [data-count] {
  font-family: var(--case-display) !important;
  font-variation-settings: "wght" 700;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
}
body.case-study-pilot #dc-root [data-stat] > div:last-child {
  margin-inline: auto !important;
}


/* ---- Collection pages: bring stray text styles onto the shared scale ---- */
/* Font specimen names → same display card-title style as every other h3 */
body.case-study-collection #dc-root div[style*="font: 800 clamp(20px, 1.9vw, 26px)"],
body.case-study-collection #dc-root div[style*="font:800 clamp(20px,1.9vw,26px)"] {
  font-family: var(--case-display) !important;
  font-variation-settings: "wght" 700;
  font-weight: 700 !important;
  font-size: var(--case-type-heading) !important;
  line-height: var(--case-leading-heading) !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
}
/* Specimen role line → body paragraph style */
body.case-study-collection #dc-root p[style*="color: rgb(169, 169, 166)"],
body.case-study-collection #dc-root p[style*="color:#a9a9a6"] {
  color: rgba(243, 239, 230, 0.76) !important;
  font-size: var(--case-type-body) !important;
  line-height: var(--case-leading-body) !important;
}
/* Outcome metric unit + context → body style; grey #9b9b97 / 14px retired */
body.case-study-collection #dc-root .brand-outcome-label,
body.case-study-collection #dc-root .brand-outcome-context,
body.case-study-collection #dc-root .pitch-mini-study-result > p,
body.case-study-collection #dc-root p[style*="color: rgb(201, 201, 201)"],
body.case-study-collection #dc-root p[style*="color:#c9c9c9"] {
  font-family: var(--case-body) !important;
  font-size: var(--case-type-body) !important;
  line-height: var(--case-leading-body) !important;
  font-weight: 400 !important;
  color: rgba(243, 239, 230, 0.76) !important;
  text-align: center !important;
}
/* Every mono sub-label the same dimmed cream, not #8c8c8c grey */
body.case-study-pilot #dc-root [style*="DM Mono"]:not(.brand-swatch-label):not([style*="background"] > span) {
  color: rgba(243, 239, 230, 0.6) !important;
}
body.case-study-collection #dc-root div[style*="background: rgb"] > span[style*="DM Mono"],
body.case-study-collection #dc-root div[style*="background:#"] > span[style*="DM Mono"] {
  color: revert-layer !important;
}
body.case-study-collection #dc-root div[style*="background"] > span[style*="color: rgb(34, 18, 7)"] { color: rgb(34, 18, 7) !important; }
body.case-study-collection #dc-root div[style*="background"] > span[style*="color: rgb(58, 44, 26)"] { color: rgb(58, 44, 26) !important; }
body.case-study-collection #dc-root div[style*="background"] > span[style*="color: rgb(244, 244, 242)"] { color: rgb(244, 244, 242) !important; }
body.case-study-pilot #dc-root section[data-screen-label] > div:first-child[style*="DM Mono"],
body.case-study-pilot #dc-root section[data-screen-label] > [style*="DM Mono"]:first-child {
  color: #fff !important;
}
/* Big stat numbers share one face and colour */
body.case-study-collection #dc-root .brand-outcome-number,
body.case-study-collection #dc-root .pitch-stat-number {
  font-family: var(--case-display) !important;
  font-variation-settings: "wght" 700;
  font-weight: 700 !important;
  color: var(--case-cream) !important;
  letter-spacing: -0.03em !important;
}
/* Back link: same weight/size family as body */
body.case-study-pilot #dc-root a[href$="#case-studies"]:not(.site-nav a) {
  font-size: var(--case-type-body) !important;
  font-weight: 600 !important;
  color: var(--case-cream) !important;
}


/* ---- Readability: all running copy in solid white ---- */
body.case-study-pilot #dc-root p,
body.case-study-pilot #dc-root .case-hero-lede,
body.case-study-pilot #dc-root .case-decision-grid > div > p,
body.case-study-pilot #dc-root [data-stat] > div:last-child,
body.case-study-pilot #dc-root .case-contact-cta p,
body.case-study-pilot #dc-root section[data-screen-label="Hero"] > p,
body.case-study-pilot #dc-root section[data-screen-label="Challenge"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > p,
body.case-study-pilot #dc-root section[data-screen-label="Alignment move"] > div:nth-child(2) > div,
body.case-study-pilot #dc-root section[data-screen-label="Execution"] > p,
body.case-study-pilot #dc-root .case-responsibilities__list li,
body.case-study-collection #dc-root .brand-outcome-label,
body.case-study-collection #dc-root .brand-outcome-context,
body.case-study-collection #dc-root .pitch-mini-study-result > p,
body.case-study-collection #dc-root p[style*="color: rgb(169, 169, 166)"],
body.case-study-collection #dc-root p[style*="color:#a9a9a6"],
body.case-study-collection #dc-root p[style*="color: rgb(201, 201, 201)"],
body.case-study-collection #dc-root p[style*="color:#c9c9c9"] {
  color: #fff !important;
}


/* ---- Collection pages: section rails (and their dashed dividers) sit on the
   nav-bar margin, so the mini-study cards and the lines above them align
   with the wordmark and nav links. ---- */
body.case-study-collection #dc-root .case-collection-studies,
body.case-study-collection #dc-root section[data-screen-label="Next project"] {
  width: calc(100vw - (2 * var(--case-nav-page))) !important;
  max-width: none !important;
  margin-inline: calc(50% - 50vw + var(--case-nav-page)) !important;
  padding-inline: 0 !important;
}


/* No divider between the hero intro and the first mini study. */
body.case-study-collection #dc-root .case-collection-studies {
  border-top: 0 !important;
}


/* ---- Pitch hero deck wall: always overfill the crop ---- */
body.case-study-collection #dc-root .case-collection-hero-crop {
  background: #101011;
}
body.case-study-collection #dc-root .case-collection-hero-crop > div {
  min-height: 160%;
}
@media (max-width: 1100px) {
  body.case-study-collection #dc-root .case-collection-hero-crop > div {
    grid-template-columns: repeat(5, 1fr) !important;
    top: -24% !important;
    left: -16% !important;
    width: 132% !important;
  }
}
@media (max-width: 820px) {
  body.case-study-collection #dc-root .case-collection-hero-crop > div {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 560px) {
  body.case-study-collection #dc-root .case-collection-hero-crop > div {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    top: -14% !important;
    left: -14% !important;
    width: 128% !important;
    transform: rotate(-7deg) !important;
  }
}


/* ---- Responsive pass: case study media grids (class hooks) ---- */
body.case-study-pilot #dc-root section[data-screen-label="Results"] > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 41px) 26px;
}
/* Long single-line notes: cap the measure like every other paragraph */
body.case-study-pilot #dc-root .cs-note {
  max-width: 78ch !important;
  margin-inline: auto !important;
}
@media (max-width: 640px) {
  body.case-study-pilot #dc-root section[data-screen-label="Results"] > div:nth-child(2) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  #dc-root .cs-collage {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 190px !important;
  }
  #dc-root .cs-collage > div[style*="grid-row"] { grid-row: auto !important; height: 300px; }
  #dc-root .cs-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 340px 220px !important;
  }
  #dc-root .cs-credentials > div[style*="grid-row"] { grid-row: 1 !important; grid-column: 1 / -1 !important; }
  #dc-root .cs-reactions { grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: 220px !important; }
  #dc-root .cs-elements { grid-auto-rows: 170px !important; }
  #dc-root .cs-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 200px !important;
  }
  #dc-root .cs-mosaic > div { grid-column: span 1 !important; }
  #dc-root .cs-mosaic > div:nth-child(1),
  #dc-root .cs-mosaic > div:nth-child(2),
  #dc-root .cs-mosaic > div:nth-child(5),
  #dc-root .cs-mosaic > div:nth-child(6) { grid-column: 1 / -1 !important; }
  #dc-root .cs-helmets { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}


/* ---- Device type & imagery pass ----------------------------------------
   Body ≥16px everywhere; labels ≥12px; tablet headlines ~3–3.5× body;
   hero media never taller than ~72% of the screen. */
body.case-study-pilot #dc-root .case-responsibilities__label { font-size: 12px !important; }
/* Wide phones: campaign feed tiles stay ≥150px wide */
@media (max-width: 400px) {
  body.case-study-collection #dc-root .case-campaign-grid { columns: 1 !important; }
}
body.case-study-pilot #dc-root section[data-screen-label="Hero"] + div,
body.case-study-collection #dc-root .case-collection-hero-media {
  height: min(clamp(330px, 55vw, 820px), 72svh) !important;
}
@supports not (height: 1svh) {
  body.case-study-pilot #dc-root section[data-screen-label="Hero"] + div,
  body.case-study-collection #dc-root .case-collection-hero-media {
    height: min(clamp(330px, 55vw, 820px), 72vh) !important;
  }
}
@media (min-width: 561px) and (max-width: 1024px) {
  :root {
    --case-type-display: clamp(2.75rem, 1.6rem + 4.2vw, 4rem);
    --case-type-section: clamp(2.125rem, 1.4rem + 3vw, 3rem);
    --case-type-heading: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  }
  body.case-study-collection #dc-root .brand-outcome-number,
  body.case-study-collection #dc-root .pitch-mini-study-lead .pitch-stat-number,
  body.case-study-pilot #dc-root [data-count] {
    font-size: clamp(2.75rem, 1.6rem + 4.2vw, 4rem) !important;
  }
}


/* Logo variants (Branding): 3-up until ~560px, then 2-up so each tile stays ≥150px */
@media (max-width: 560px) {
  body.case-study-collection #dc-root .case-mini-study div[style*="display:flex;gap:16px;margin-top:16px"],
  body.case-study-collection #dc-root .case-mini-study div[style*="display: flex; gap: 16px; margin-top: 16px"] {
    flex-wrap: wrap !important;
  }
  body.case-study-collection #dc-root .case-mini-study div[style*="gap:16px;margin-top:16px"] > div,
  body.case-study-collection #dc-root .case-mini-study div[style*="gap: 16px; margin-top: 16px"] > div {
    flex: 1 1 100% !important;
  }
}


/* Mini-study pages: keep the blur-in reveal, drop the orange swipe */
body.case-study-collection #dc-root .blur-highlight {
  --blur-highlight-color: transparent;
  background-image: none !important;
}


/* Phones: one gutter for every section (hero used 24px, body 6vw ≈ 22.5px) */
@media (max-width: 560px) {
  body.case-study-pilot #dc-root section[data-screen-label],
  body.case-study-collection #dc-root section[data-screen-label] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 820px) {
  body.case-study-pilot #dc-root .site-nav a { min-height: 44px !important; padding: 12px 24px !important; }
}

/* ---- Sitewide content alignment ---------------------------------------
   Portfolio direction: every case-study content block shares one center
   axis. Navigation, controls, and media keep their own layout behavior. */
body.case-study-pilot #dc-root section[data-screen-label],
body.case-study-collection #dc-root section[data-screen-label],
body.case-study-pilot #dc-root .case-contact-cta,
body.case-study-collection #dc-root .case-mini-study {
  text-align: center !important;
}

body.case-study-pilot #dc-root section[data-screen-label] h1,
body.case-study-pilot #dc-root section[data-screen-label] h2,
body.case-study-pilot #dc-root section[data-screen-label] h3,
body.case-study-pilot #dc-root section[data-screen-label] p,
body.case-study-pilot #dc-root section[data-screen-label] figcaption,
body.case-study-pilot #dc-root section[data-screen-label] dt,
body.case-study-pilot #dc-root section[data-screen-label] dd,
body.case-study-pilot #dc-root section[data-screen-label] li,
body.case-study-collection #dc-root section[data-screen-label] h1,
body.case-study-collection #dc-root section[data-screen-label] h2,
body.case-study-collection #dc-root section[data-screen-label] h3,
body.case-study-collection #dc-root section[data-screen-label] p,
body.case-study-collection #dc-root section[data-screen-label] figcaption,
body.case-study-collection #dc-root section[data-screen-label] dt,
body.case-study-collection #dc-root section[data-screen-label] dd,
body.case-study-collection #dc-root section[data-screen-label] li {
  margin-inline: auto !important;
  text-align: center !important;
}

body.case-study-pilot #dc-root section[data-screen-label] ul,
body.case-study-pilot #dc-root section[data-screen-label] ol,
body.case-study-collection #dc-root section[data-screen-label] ul,
body.case-study-collection #dc-root section[data-screen-label] ol {
  margin-inline: auto !important;
  text-align: center !important;
  list-style-position: inside;
}

body.case-study-pilot #dc-root .case-decision-grid > div,
body.case-study-pilot #dc-root .case-constraint-card,
body.case-study-pilot #dc-root .case-constraint-solution,
body.case-study-collection #dc-root .case-collection-framework > div,
body.case-study-collection #dc-root .brand-mini-study-fact,
body.case-study-collection #dc-root .pitch-mini-study-points > div,
body.case-study-collection #dc-root .pitch-mini-study-result {
  align-items: center !important;
  text-align: center !important;
}