/* Section sidebar and content column for the UX Was Here and Quebec Winter
   Carnival case studies (js/case-study-nav.js), matching PhoenixRise's
   (phoenixrise.css): a sticky sidebar of collapsible groups beside the
   content at the same width, which becomes an "On this page" bar on phones.
   The content's older layout offsets (main2.css and the page stylesheets)
   are reset here so it sits cleanly in its column. */

.case-study-shell {
  --case-nav-text: #0e0a1c;
  --case-nav-hover: #4d317b;
  --case-nav-active: #7138c8;
  --case-nav-rule: #c6ccd6;
  --case-nav-bg: rgba(255, 255, 255, 0.97);
  --case-accent: #6d3fc8;
  /* Links in the content; a case study can set its own colours */
  --case-link: var(--case-nav-active);
  --case-link-hover: var(--case-nav-hover);
  /* Behind notes */
  --case-tint: #f3edfc;
  /* Full width past main.css's body padding, like the header and hero */
  width: calc(100% + 5rem);
  margin-left: calc(-2rem - 8px);
}

:root[data-portfolio-theme="dark"] .case-study-shell {
  --case-nav-text: #f5f1fa;
  --case-nav-hover: #c9a8ff;
  --case-nav-active: #c9a8ff;
  --case-nav-rule: #4a4560;
  --case-nav-bg: rgba(14, 10, 28, 0.97);
  --case-accent: #c9a8ff;
  --case-tint: #1d1533;
}

.case-study {
  display: grid;
  box-sizing: border-box;
  width: min(1320px, calc(100% - clamp(40px, 8vw, 128px)));
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(36px, 5vw, 72px);
  margin: 0 auto;
  padding: 40px 0 96px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* ----- Sidebar ----- */

.case-study__sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.case-study__sidebar::-webkit-scrollbar {
  display: none;
}

.case-nav {
  position: static;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--case-nav-text);
  background: transparent;
  animation: none;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.case-nav__mobile-toggle {
  display: none;
}

.case-nav__groups,
.case-nav__submenu ul {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  transform: none;
  list-style: none;
}

/* main2.css nudges every "nav ul li" down 0.4rem (for the old top menu);
   inside a group's clipped list that cut off the bottom of the last link,
   so the nudge is undone here */
.case-nav .case-nav__groups li {
  margin: 0;
  padding: 0;
  line-height: 1.35;
  transform: none;
}

/* PhoenixRise's 14px between groups (specific enough to outrank the
   list-item reset above) */
.case-nav .case-nav__groups > li + li {
  margin-top: 14px;
}

.case-nav__group-toggle {
  display: flex;
  width: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  color: var(--case-nav-text);
  background: transparent;
  font: 600 16px/1.4 "Plus Jakarta Sans", sans-serif;
  text-align: left;
  cursor: pointer;
}

.case-nav__group-toggle:hover,
.case-nav__submenu a:hover {
  color: var(--case-nav-hover);
  text-decoration: underline;
  text-decoration-color: var(--case-nav-rule);
  text-underline-offset: 3px;
}

.case-nav__group-toggle[aria-current="true"] {
  color: var(--case-nav-active);
  font-weight: 700;
}

/* Collapsing and expanding, as in PhoenixRise */
.case-nav__submenu {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 240ms ease,
    opacity 180ms ease;
}

.case-nav__group[data-expanded="false"] .case-nav__submenu {
  grid-template-rows: 0fr;
  opacity: 0;
}

.case-nav__submenu > ul {
  min-height: 0;
  overflow: hidden;
  padding-left: 16px;
}

.case-nav__submenu a,
.case-nav__submenu a:link,
.case-nav__submenu a:visited {
  display: block;
  padding: 5px 0;
  color: var(--case-nav-text);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.case-nav__submenu a:visited:hover {
  color: var(--case-nav-hover);
}

/* A section on its own at the top level (no group), styled like a group
   heading, as on PhoenixRise */
.case-nav .case-nav__standalone > a,
.case-nav .case-nav__standalone > a:link,
.case-nav .case-nav__standalone > a:visited {
  display: block;
  min-height: 28px;
  box-sizing: border-box;
  padding: 2px 0;
  color: var(--case-nav-text);
  font: 600 16px/1.4 "Plus Jakarta Sans", sans-serif;
  text-decoration: none;
}

.case-nav .case-nav__standalone > a:hover {
  color: var(--case-nav-hover);
  text-decoration: underline;
  text-decoration-color: var(--case-nav-rule);
  text-underline-offset: 3px;
}

.case-nav .case-nav__standalone > a[aria-current="true"] {
  color: var(--case-nav-active);
  font-weight: 700;
}

.case-nav .case-nav__submenu a[aria-current="true"] {
  color: var(--case-nav-active);
  font-weight: 700;
}

.case-nav a:focus-visible,
.case-nav button:focus-visible {
  outline: 2px solid var(--case-nav-active);
  outline-offset: 3px;
}

.case-nav__mobile-toggle svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 220ms ease;
}

/* ----- Content ----- */

.case-study__content {
  min-width: 0;
}

/* Linked sections land a little below the top, clear of the phone bar */
.case-study__content [data-case-section] {
  scroll-margin-top: 28px;
}

/* The content column replaces the old centred 75% wrapper */
.case-study__content .project-overall {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.case-study__content .project-main-content,
.case-study__content .project-overview {
  display: block;
  width: 100%;
}

.case-study__content :is(h2, h3, h4, p, li) {
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* Section titles at PhoenixRise's size: bold, uppercase, in the accent,
   with PhoenixRise's 58px between the end of one section and the start of
   the next at every width */
.case-study__content {
  --case-section-gap: 58px;
}

.case-study__content .project-section-title {
  margin: var(--case-section-gap) 0 14px;
  padding: 0;
  color: var(--case-accent);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.case-study__content .project-overview .project-section-title {
  margin-top: 0;
}

/* Image-and-text rows: two even columns instead of the old offsets */
.case-study__content
  :is(
    .two-section-container,
    #uwh-survey-container
  ) {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(32px, 4vw, 56px) 0 0;
  transform: none;
}

.case-study__content .project-solution-section {
  width: auto;
  margin: 0;
  padding: 0;
}

.case-study__content
  :is(
    .two-section-container,
    #uwh-survey-container
  )
  :is(.image-text-container, .text-image-container)
  :is(img, h2, h3, h4, p, ul, li) {
  width: auto;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.case-study__content
  :is(
    .two-section-container,
    #uwh-survey-container
  )
  :is(.image-text-container, .text-image-container)
  img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
}

/* A section title that opens a row sits at the top of its column */
.case-study__content
  :is(.image-text-container, .text-image-container)
  > .project-section-title:first-child {
  margin-top: 0;
}

.case-study__content .one-image {
  max-width: 100%;
  height: auto;
}

/* The five design phases under the Design Process image, as five even
   columns lined up with the image (they were placed by hand-tuned margins) */
.case-study__content .design-phase-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.case-study__content .design-phase-container .design-phase-card {
  margin: 0;
  text-align: center;
}

.case-study__content .design-phase-card ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.case-study__content .design-phase-card li {
  width: auto;
  margin: 0 0 6px;
  padding: 0;
}

/* ----- More case studies, as on PhoenixRise and ALEASAT ----- */

.case-more {
  padding: clamp(48px, 6vw, 72px) 0 0;
}

.case-study__content .case-more > h2 {
  margin: 0 0 14px;
  color: var(--case-accent);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.case-more .portfolio-case-studies {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}

.case-more .portfolio-case-card {
  --portfolio-case-padding: 26px;
  min-height: 345px;
}

.case-more .portfolio-case-card__eyebrow {
  margin-bottom: 12px;
  font-size: 16px;
}

.case-more .portfolio-case-card h3 {
  margin-bottom: 12px;
  font-size: clamp(20px, 1.85vw, 22px);
  line-height: 1.35;
}

.case-more .portfolio-case-card__tags li {
  font-size: 15px;
}

.case-more .portfolio-case-card--ux-was-here {
  align-self: stretch;
}

@media (max-width: 900px) {
  .case-more .portfolio-case-studies {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .case-more .portfolio-case-card {
    min-height: 0;
  }
}

/* ----- Phones: an "On this page" bar pinned to the top ----- */

@media (max-width: 767px) {
  .case-study {
    display: block;
    width: 100%;
    padding: 0 0 72px;
  }

  .case-study__sidebar {
    top: 0;
    z-index: 5;
    max-height: min(100dvh, 100vh);
    overflow: visible;
    padding: 0 20px;
    background: var(--case-nav-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .case-nav__mobile-toggle {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--case-nav-text);
    background: transparent;
    font: 600 16px/1.4 "Plus Jakarta Sans", sans-serif;
    text-align: left;
    cursor: pointer;
  }

  .case-nav__mobile-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .case-nav__mobile-toggle:focus-visible {
    outline: 2px solid var(--case-nav-active);
    outline-offset: -2px;
  }

  .case-nav__panel {
    display: grid;
    grid-template-rows: 1fr;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    scrollbar-width: none;
    opacity: 1;
    transition:
      grid-template-rows 240ms ease,
      opacity 180ms ease;
  }

  .case-nav__panel[data-open="false"] {
    grid-template-rows: 0fr;
    opacity: 0;
  }

  .case-nav__panel-inner {
    min-height: 0;
  }

  .case-nav__panel[data-open="false"] .case-nav__panel-inner {
    overflow: hidden;
  }

  .case-nav__groups {
    padding: 0 0 14px;
  }

  .case-nav .case-nav__groups > li + li {
    margin-top: 4px;
  }

  .case-study__content {
    padding: 0 20px;
  }

  .case-study__content [data-case-section] {
    scroll-margin-top: 72px;
  }

  .case-study__content
    :is(
      .two-section-container,
      #uwh-survey-container
    ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-study__content .design-phase-container {
    gap: 6px;
  }

  .case-study__content .design-phase-card h4 {
    font-size: 13px;
  }

  .case-study__content .design-phase-card li {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-nav__submenu,
  .case-nav__panel,
  .case-nav__mobile-toggle svg {
    transition: none;
  }
}

/* ----- Even spacing between sections, as on PhoenixRise -----
   The old stylesheets gave unnamed sections 1em margins and padding and a
   few blocks their own gaps (5rem above UX Was Here's solution, 3rem under
   its design phases); without them every section starts the same
   --case-section-gap below the one before. A row that opens with a section
   title starts the section, so it takes the gap itself. */
.case-study__content section:not([id]) {
  margin: 0;
  padding: 0;
}

.case-study__content
  :is(
    .two-section-container,
    #uwh-survey-container
  ):has(> * > .project-section-title) {
  margin-top: var(--case-section-gap);
}

.case-study__content #uwh-solution {
  margin-top: 0;
}

/* Nothing trails out of a row's columns into the gap: neither the last
   block nor the last paragraph or list item inside it */
.case-study__content
  :is(.image-text-container, .text-image-container)
  > :last-child,
.case-study__content
  :is(.image-text-container, .text-image-container)
  > :last-child
  > :last-child {
  margin-bottom: 0;
}

/* Content starts 14px under its title (the first paragraph was pulled up
   under some titles and an image pushed 3rem down under another) */
.case-study__content .project-section-title + * {
  margin-top: 0;
}

.case-study__content .design-phase-card li:last-child {
  margin-bottom: 0;
}

/* More case studies sits a little further off, with more room under the
   cards before the footer, as on PhoenixRise */
.case-study__content section.case-more {
  margin-top: 90px;
  padding-bottom: 40px;
}

/* No sideways scroll on phones, as on PhoenixRise: the shared footer sits
   8px off centre and would otherwise widen the page (both html and body
   are clipped, so the viewport does not take the overflow over) */
html:has(.case-study-shell),
body:has(.case-study-shell) {
  overflow-x: clip;
}

/* ----- Text, as on PhoenixRise -----
   Section titles are set above; under them, a 20px bold opening statement,
   20px bold subheadings and 18px body text and lists with roomy lines, all
   in the page's text colour. The older styles' sizes, negative margins and
   brown text are reset here. Cards, captions and the design phases keep
   their own type. */
.case-study__content :is(h3, h4):is(.project-section-subheading, .project-section-paragraph) {
  margin: 0 0 14px;
  color: var(--case-nav-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: normal;
}

/* The statement that opens a section */
.case-study__content .project-section-title + :is(h3, h4) {
  margin-bottom: 16px;
  line-height: 30px;
}

.case-study__content
  :is(p, li):not(
    .portfolio-case-card *,
    .design-phase-card *,
    .qwc-prototype__action *,
    .uwh-wireframes *
  ) {
  color: var(--case-nav-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
}

.case-study__content p:not(.portfolio-case-card *) {
  margin: 0 0 16px;
}

.case-study__content
  :is(.project-overview, .project-main-content, .two-section-container, .image-text-container, .text-image-container)
  li:not(.portfolio-case-card *) {
  margin: 0 0 8px;
}

/* A numbered point and its paragraph, then the next: 28px apart, as
   between PhoenixRise's design goals */
.case-study__content .heading-paragraph-container + .heading-paragraph-container {
  margin-top: 12px;
}

/* A list sits 14px under its heading, and the next heading 28px under the
   list (the survey's older styles pulled the list up and pushed the next
   heading 2.5rem down) */
.case-study__content :is(h3, h4) + ul {
  margin-top: 0;
}

.case-study__content #uwh-key-question {
  margin-bottom: 20px;
}

/* Jump links ("Jump to the prototype", "Explore gamification"...), as on
   PhoenixRise: underlined text and a scribbled arrow pointing down. The
   arrow is image/scribble-arrow.png (embedded, so it loads however the page
   is opened: browsers refuse mask images from local files) used as a mask,
   filled with the link's
   own colour, so it's the case study's link colour in each theme and follows
   the hover colour; it nudges down on hover. */
.case-study__content .case-jump {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    color: var(--case-link);
    font: 600 18px/1.5 "Plus Jakarta Sans", sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.case-study__content .case-jump:hover {
    color: var(--case-link-hover);
}

.case-jump__arrow {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAiCAYAAABbXymAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAldJREFUeAGtVruSEkEUPbfnUVsbrZmZGFoG8gkYW1axoFWGbmBRrIHLF4BfsGugiAkYWq5AYK5/AJHpsl8gmdQO022/YGGAYWarTxU9Q8/t07fPvX27CWl41S4EERsJgd68X2sgB1jaxzBiRQKOGOEM5e4RXBGzmE8X7x7+leCKWGKiGgFM4+HpEK6IZ8P6RD2VHMiJfR4rXKvmoNwuIAcyENNf1cYBdxc8A6495hEVkAMZiIXODMbIrceCk0054ZaYyHhMcO2xlUJSP0AOZMmKKe6ADFIwQ0y4hxzYS7yoF0KQ6zw29UJua9ca3w17iWc4MFIQHEsxPLF5DOca3yLHKZKV2JROzLITB5VPZ0H18zs4hg/ymkq/oPqlHMXB8ULTVRDElZBbeu6jAJt+uxBU2q/Vk8ny1bCDSyG7GSHnSbHhBLGu+rGoX+8JwU+sa4WQsV/By4/FVWNZiLTGxLXHOyGPr5Kxx1gHL0lO3B8p7ZfEtiZLyVKJuce6ZkD8dZkVa+R6Sd65X+mcmz9ibDuLu0jDSqcJNbHAJOqfXqylW5Jc3YDkgCvBbMAEPdlGqldHaGkTb36sxyaNFLk0er/skNIwbpdIm1KE1U5Zrc7Mi0b0/e14K7HCzWWtlSRfvK7dL2SQZaD0pFzaR5e1i+VqsQMb5BaLoqRuoiH3B2oPKNK5sl+BhxTEf37+9h4/l2NR0h1C9OLBm2++TCtfsAFMlgyjH7V6ciwhA8IXnZaMdnPzC40P4+DpdMtuTfV41XP26Nm1vAI8lK7chypKhA+HcVjfRqrwH5vr1pnP/pKuAAAAAElFTkSuQmCC") center / contain no-repeat;
    mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAiCAYAAABbXymAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAldJREFUeAGtVruSEkEUPbfnUVsbrZmZGFoG8gkYW1axoFWGbmBRrIHLF4BfsGugiAkYWq5AYK5/AJHpsl8gmdQO022/YGGAYWarTxU9Q8/t07fPvX27CWl41S4EERsJgd68X2sgB1jaxzBiRQKOGOEM5e4RXBGzmE8X7x7+leCKWGKiGgFM4+HpEK6IZ8P6RD2VHMiJfR4rXKvmoNwuIAcyENNf1cYBdxc8A6495hEVkAMZiIXODMbIrceCk0054ZaYyHhMcO2xlUJSP0AOZMmKKe6ADFIwQ0y4hxzYS7yoF0KQ6zw29UJua9ca3w17iWc4MFIQHEsxPLF5DOca3yLHKZKV2JROzLITB5VPZ0H18zs4hg/ymkq/oPqlHMXB8ULTVRDElZBbeu6jAJt+uxBU2q/Vk8ny1bCDSyG7GSHnSbHhBLGu+rGoX+8JwU+sa4WQsV/By4/FVWNZiLTGxLXHOyGPr5Kxx1gHL0lO3B8p7ZfEtiZLyVKJuce6ZkD8dZkVa+R6Sd65X+mcmz9ibDuLu0jDSqcJNbHAJOqfXqylW5Jc3YDkgCvBbMAEPdlGqldHaGkTb36sxyaNFLk0er/skNIwbpdIm1KE1U5Zrc7Mi0b0/e14K7HCzWWtlSRfvK7dL2SQZaD0pFzaR5e1i+VqsQMb5BaLoqRuoiH3B2oPKNK5sl+BhxTEf37+9h4/l2NR0h1C9OLBm2++TCtfsAFMlgyjH7V6ciwhA8IXnZaMdnPzC40P4+DpdMtuTfV41XP26Nm1vAI8lK7chypKhA+HcVjfRqrwH5vr1pnP/pKuAAAAAElFTkSuQmCC") center / contain no-repeat;
    transition: transform 220ms ease;
}

.case-jump:is(:hover, :focus-visible) .case-jump__arrow {
    transform: translateY(4px);
}

.case-study__content .case-jump:focus-visible {
    outline: 2px solid var(--case-link);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .case-jump__arrow {
        transition: none;
    }
}

/* Notes that sum up a section, set apart like PhoenixRise's closing notes */
.case-note {
    box-sizing: border-box;
    margin: clamp(36px, 5vw, 56px) 0 0;
    padding: 24px;
    border-radius: 10px;
    background: var(--case-tint);
}

.case-note > :last-child {
    margin-bottom: 0;
}

/* The note's sketched lightbulb, beside its heading as on PhoenixRise:
   image/scribble-lightbulb.png (embedded, so it loads however the page is
   opened) used as a mask, filled with the case study's link colour in each theme */
.case-note__heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.case-study__content .case-note__heading .project-section-subheading {
    margin: 0;
}

.case-lightbulb {
    display: block;
    width: 24px;
    height: 32px;
    flex: 0 0 auto;
    background: var(--case-link);
    -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAABQ1JREFUeAGtV7Fy20YQ3d0DGEZN6C8w1SaF6S8w9QEeU7I9405SE0aTItIXSPqCuHEYuSHdZSaSAs64N/UFopokXeAvMNxRAHGX3TuAAkUSpCzvDHl3wOHe7d7u2z2ERdLq1nwatcBgAwmf8JMa/+qFGaEBE4LR/URjAMFeCCWCM09eder+Ne4D4Ta6xVcSY0wv0eZ4EeAUkL/12z6gOswB0MCFhjRQhEMYQzgqLOK/fNNA7dW52+LftkNjLdV4M/nz5+FCoMrWySGPjrJhQKk+GC0xRy5VtoJJVJdN2XR4sJOctd/NAIkmiOpXZwK9m5zv9eALpPLi5IhRDueBKTkTT6sO92sG4SA5++l3+EJJ/34/UD88lc03+a+lvn96lf7z/l95R34MTbDeZPrJafs13FPi0/YR2+lY+qxVF1qdugUiRHuQaap78JVEwBBwIE7lE1pTkgFctx2fY+IrCvrpLmsUIeKOxKSXv1AJRcmcD/zWm4YBqo2DvYF8UIG4qUFHY6gOIdiNFgGN/tgLK89P+tzd9mi0T1Ai4vKovEtS9MF/fvKpouJP7D5/ybhC8aXEEpRLYLVD9WQhkL/V2ZG4EvV5GBaDmP+H/K4O2utCiXAsZoFrGgxk7CDhQXES27bl5ugDhJvzS0kfxWc/Prb2B2iUaZUHvGySjAY7IKTmrf08tI3SQ1708+Spdl6KoPsZ8jLzue+UMoHr0aPpV+aBxWEnYbqYcJdBXGlhkWqr07TfAAxpNK4OnRmYp9ir5n0Q66oEcuiAwGkCaOdqbRZ6Xqpox87kjZK4KMnhsogbFjSyz1IyLZkTn7XX19LKg7FEvhVnWvRwPhBTG2asTpw+rNchpseupV9yrZhcB27j3rP82yiPm1dCK6Yhlhif7g1mQCTeEvrg9mt64hQWaMSTc8rItUr0t71FJs34UUwSzNOE4+0ShD85P63pbw6sVvn7aa14x7z73LOmTWrnWP7SZN4VtfA4wP2EJiCk9UZuhQlQUauKIpubCKE3Ac8k8yS7kJhNchlTzaWwBs8/ygI7WNOVx8XEOcUMORHK/rwXnWYR3KZ5EOfIChQ0V/7Lt40sYTbcI7gg1BvsOJvRLR6cAhIipCyXkKaumEObsXNnriVcS01prLOkaRZTpi8eeX3etpuDOTLDddc2+Tku87wRL+Tcl53iwrVoA9tIwVIAjUqYfC7QjChl44nz1kPnfY4Tx86sN6BLxJv3kKsZCTYYM2vImA9amrrvJ8zYjlIcaLw4lpZqxAvI4VunEHM4k3y03pSfiYHPVRjl/StYQWaAJgtk3ObWgu+ynstJaCJNLmiLhHsnILhZfZIaJqWxobptJLVkLK5zqrorUB4n7GX/3QIOSWFoTeqlTE+28AcfcCWN0AUi5yJ2Z/aiOi90c0YZg/Pzpq2rjemL2YzBGt8wLFvYylbDYOltgunDwH2FNxGft9ehHOjtZRYbm0wfUco/eWEzq+fMqA3VeOeiab2wuO0bome2Jkj1etmlwGOGjoxUAAwQF+Ihq/FCWCJShkk7gmo5M3BwfrSq6anb3GpyO+bKgOAecpeg9diThoiwzTmny46R3W24jtP8MerQaByKeZNg9haXcu1nL1grBK2dxwA9yK+H5cILygXZXBmpXl2mrfP5bizju6k7LGfPeurrmmIvSzWXscIEzAASWzzz0dwVVnDtGaBlYsvfFJuyATYvOwJGXKC8XuWu+z8CnXfrb08z0AAAAABJRU5ErkJggg==") center / contain no-repeat;
    mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAoCAYAAADg+OpoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAABQ1JREFUeAGtV7Fy20YQ3d0DGEZN6C8w1SaF6S8w9QEeU7I9405SE0aTItIXSPqCuHEYuSHdZSaSAs64N/UFopokXeAvMNxRAHGX3TuAAkUSpCzvDHl3wOHe7d7u2z2ERdLq1nwatcBgAwmf8JMa/+qFGaEBE4LR/URjAMFeCCWCM09eder+Ne4D4Ta6xVcSY0wv0eZ4EeAUkL/12z6gOswB0MCFhjRQhEMYQzgqLOK/fNNA7dW52+LftkNjLdV4M/nz5+FCoMrWySGPjrJhQKk+GC0xRy5VtoJJVJdN2XR4sJOctd/NAIkmiOpXZwK9m5zv9eALpPLi5IhRDueBKTkTT6sO92sG4SA5++l3+EJJ/34/UD88lc03+a+lvn96lf7z/l95R34MTbDeZPrJafs13FPi0/YR2+lY+qxVF1qdugUiRHuQaap78JVEwBBwIE7lE1pTkgFctx2fY+IrCvrpLmsUIeKOxKSXv1AJRcmcD/zWm4YBqo2DvYF8UIG4qUFHY6gOIdiNFgGN/tgLK89P+tzd9mi0T1Ai4vKovEtS9MF/fvKpouJP7D5/ybhC8aXEEpRLYLVD9WQhkL/V2ZG4EvV5GBaDmP+H/K4O2utCiXAsZoFrGgxk7CDhQXES27bl5ugDhJvzS0kfxWc/Prb2B2iUaZUHvGySjAY7IKTmrf08tI3SQ1708+Spdl6KoPsZ8jLzue+UMoHr0aPpV+aBxWEnYbqYcJdBXGlhkWqr07TfAAxpNK4OnRmYp9ir5n0Q66oEcuiAwGkCaOdqbRZ6Xqpox87kjZK4KMnhsogbFjSyz1IyLZkTn7XX19LKg7FEvhVnWvRwPhBTG2asTpw+rNchpseupV9yrZhcB27j3rP82yiPm1dCK6Yhlhif7g1mQCTeEvrg9mt64hQWaMSTc8rItUr0t71FJs34UUwSzNOE4+0ShD85P63pbw6sVvn7aa14x7z73LOmTWrnWP7SZN4VtfA4wP2EJiCk9UZuhQlQUauKIpubCKE3Ac8k8yS7kJhNchlTzaWwBs8/ygI7WNOVx8XEOcUMORHK/rwXnWYR3KZ5EOfIChQ0V/7Lt40sYTbcI7gg1BvsOJvRLR6cAhIipCyXkKaumEObsXNnriVcS01prLOkaRZTpi8eeX3etpuDOTLDddc2+Tku87wRL+Tcl53iwrVoA9tIwVIAjUqYfC7QjChl44nz1kPnfY4Tx86sN6BLxJv3kKsZCTYYM2vImA9amrrvJ8zYjlIcaLw4lpZqxAvI4VunEHM4k3y03pSfiYHPVRjl/StYQWaAJgtk3ObWgu+ynstJaCJNLmiLhHsnILhZfZIaJqWxobptJLVkLK5zqrorUB4n7GX/3QIOSWFoTeqlTE+28AcfcCWN0AUi5yJ2Z/aiOi90c0YZg/Pzpq2rjemL2YzBGt8wLFvYylbDYOltgunDwH2FNxGft9ehHOjtZRYbm0wfUco/eWEzq+fMqA3VeOeiab2wuO0bome2Jkj1etmlwGOGjoxUAAwQF+Ihq/FCWCJShkk7gmo5M3BwfrSq6anb3GpyO+bKgOAecpeg9diThoiwzTmny46R3W24jtP8MerQaByKeZNg9haXcu1nL1grBK2dxwA9yK+H5cILygXZXBmpXl2mrfP5bizju6k7LGfPeurrmmIvSzWXscIEzAASWzzz0dwVVnDtGaBlYsvfFJuyATYvOwJGXKC8XuWu+z8CnXfrb08z0AAAAABJRU5ErkJggg==") center / contain no-repeat;
}

/* The paragraph sits 16px under the heading, and adds nothing below, so the
   note's padding is even */
.case-study__content .case-note .project-section-paragraph {
    margin: 16px 0 0;
}