@font-face {
  font-family: 'WT Kormelink';
  src: url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/wtkormelink-italictrial-webfont.woff2?v=2') format('woff2'),
       url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/wtkormelink-italictrial-webfont.woff?v=2') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/altehaasgroteskbold-webfont.woff2') format('woff2'),
       url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/altehaasgroteskbold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/altehaasgroteskregular-webfont.woff2') format('woff2'),
       url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/altehaasgroteskregular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Petit Serif';
  src: url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/petitseriftrial-regular-webfont.woff2') format('woff2'),
       url('/wp-content/themes/Cogenerate/fonts/report-faith-2025/petitseriftrial-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html:has(faith-report) {
  font: 20px/1.2 "Alte Haas Grotesk";
  scroll-behavior: smooth;
}

body:has(faith-report) {
  --admin-bar-offset: 0px;
  --gutter: 12px;
  --outside: 20px;

  @media (min-width: 800px) {
    --gutter: 32px;
    --outside: 50px;
  }

  --column: calc((100vw - 2 * var(--outside) - 11 * var(--gutter)) / 12);

  --font-serif: "Petit Serif", serif;
  --font-script: "WT Kormelink", script;
  --font-serif2: "plantin", serif;
  --font-sans: "Alte Haas Grotesk", sans-serif;
  --font-monospace: "Courier Prime", monospace;

  --color-black: #171D1A;
  --color-white: #FDFBF6;
  --color-brown: #A8834D;
  --color-brown-light: #E7DFD4;
  --color-purple: #B99AE5;
  --color-purple-light: #E6E2F6;
  --color-orange: #E89347;
  --color-orange-light: #F6DDC6;
  --color-blue: #4697FD;
  --color-blue-light: #C1D8FF;
  --color-gray: #73919C;
  --color-gray-light: #C9D8DC;
  --color-yellow: #DFBD4A;
  --color-yellow-light: #EEEEE3;
  --color-teal: #6DD1DF;
  --color-teal-light: #B9E9F3;

  background-color: var(--color-white);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:has(#wpadminbar) {
    --admin-bar-offset: 32px;

    @media (max-width: 782px) {
      --admin-bar-offset: 46px;
    }
  }
}

faith-report {
  color: var(--color-black);
  display: grid;
  max-width: 1708px;
  margin-inline: auto;
  grid-template-columns: var(--outside) repeat(5, 1fr 0 1fr var(--gutter)) 1fr 0 1fr var(--outside);
  padding-bottom: 80px;
  overflow-x: hidden;

  @media (min-width: 800px) {
    grid-template-columns: var(--outside) repeat(11, 1fr var(--gutter)) 1fr var(--outside);
  }

  .h1 {
    font: 86px / 0.95 var(--font-serif);
    letter-spacing: -0.03em !important;
    text-transform: uppercase;

    @media (max-width: 600px) {
      font-size: 36px;
    }
  }

  .h2 {
    font: 64px / 0.95 var(--font-serif);
    letter-spacing: -0.03em !important;
    text-transform: uppercase;

    @media (max-width: 600px) {
      font-size: 30px;
    }
  }

  .h3 {
    font: 48px / 1.2 var(--font-script);
    font-feature-settings: "swsh" on;
    letter-spacing: -0.04em !important;
    font-style: italic;

    @media (max-width: 600px) {
      font-size: 24px;
    }
  }

  .h4 {
    font: 40px / 1.05 var(--font-serif);
    letter-spacing: -0.03em !important;
    text-transform: uppercase;

    @media (max-width: 600px) {
      font: 28px / 0.95 var(--font-serif);
      letter-spacing: -0.03em !important;
      text-transform: uppercase;
    }
  }

  .h5 {
    font: 32px / 1.2 var(--font-script);
    font-feature-settings: "swsh" on;
    letter-spacing: -0.03em !important;
    font-style: italic;

    @media (max-width: 600px) {
      font-size: 24px;
    }
  }

  .h6 {
    font: 28px / 0.95 var(--font-serif);
    letter-spacing: -0.03em !important;
    text-transform: uppercase;
  }

  .practice-grid-quotes {
    font: 20px / 1.05 var(--font-serif2);
    letter-spacing: -0.02em;

    @media (min-width: 800px) {
      font-size: 30px;
      line-height: 1.15;
    }
  }

  .callout-quotes {
    font: 24px / 1.05 var(--font-serif2);
    letter-spacing: -0.02em !important;

    @media (max-width: 600px) {
      font-size: 20px;
    }
  }

  .carousel-quotes {
    font: 20px / 1.15 var(--font-serif2);
    letter-spacing: -0.02em !important;

    @media (max-width: 600px) {
      font-size: 16px;
    }
  }

  .body-copy {
    font: 16px / 1.3 var(--font-sans);
    letter-spacing: 0;

    strong {
      font-weight: bold;
    }
  }

  .small-body-copy {
    font: 13px / 1.3 var(--font-sans);
    letter-spacing: 0;
  }

  .quote-name {
    font: 13px / 1.2 var(--font-monospace);
    letter-spacing: 0 !important;
    text-transform: uppercase;

    @media (max-width: 600px) {
      font-size: 11px;
    }
  }

  .lowercase {
    text-transform: lowercase;
  }

  .drop-cap {
    display: inline-block;
    line-height: 19px;
    margin-top: -37px;
  }

  > * {
    grid-column: 2 / span 23;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    pdth: 1px;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--color-black);
  }

  :where(a) {
    color: inherit;
  }

  :where(button) {
    font: inherit;
    color: inherit;
  }

  :where(strong, b) {
    font-weight: 500;
  }

  img {
    display: block;
    width: 100px;
    height: auto;
  }

  figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .body-copy p,
  p.body-copy {
    margin-bottom: 1lh;
  }

  .nav-container {
    --width: 250px;
    position: fixed;
    top: calc(32px + var(--admin-bar-offset));
    left: calc(50% - var(--width) / 2);
    width: var(--width);
    display: flex;
    justify-content: center;
    z-index: 2;
  }

  .nav {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 13px 15px;
    font: 18px / 0.82 var(--font-serif2);
    background-color: var(--color-gray-light);
    border: 1px solid var(--color-gray);
    color: var(--color-black);
    cursor: pointer;
    border-radius: 10px;

    span {
      display: flex;
      gap: 18px;
      align-items: center;
    }

    span:before {
      content: " ";
      display: block;
      width: 6px;
      height: 6px;
      background-color: currentColor;
      transform: rotate(45deg);
    }
  }

  .menu {
    position: fixed;
    z-index: 100;
    left: 0;
    top: var(--admin-bar-offset);
    min-width: 100%;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-white);
    border: 0;
    overflow: scroll;

    &[open] {
      @media (min-width: 800px) {
        display: grid;
        grid-template-rows: minmax(75px, 9.3%);
      }
    }

    .header {
      padding: var(--outside);

      @media (min-width: 800px) {
        padding: 0 20px 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      @media (max-width: 799px) {
        form {
          position: absolute;
          right: var(--outside);
          top: var(--outside);
        }

        button {
          height: 35px;
        }
      }

      img {
        height: 35px;
        width: auto;
      }

      .links-wrapper {
        margin: calc(-1 * var(--outside));
        padding: var(--outside);
        padding-right: calc(var(--outside * 2));
        overflow-x: auto;
      }

      .links {
        --gap: 30px;

        display: flex;
        margin-top: 29px;
        gap: var(--gap);

        &:after {
          content: ".";
          display: block;
          width: 0;
          height: 100%;
          visibility: hidden;
        }

        @media (min-width: 800px) {
          margin: 0;
          --gap: 74px;
        }

        a {
          display: block;
          position: relative;
          white-space: nowrap;

          @media (max-width: 799px) {
            font-size: 24px;
          }

          &:hover {
            color: var(--color-gray);
          }
        }

        a:not(:last-child):after {
          content: " ";
          display: block;
          width: 6px;
          height: 6px;
          background-color: var(--color-black);
          transform: rotate(45deg);
          position: absolute;
          left: calc(100% + var(--gap) / 2 - 3px);
          top: calc(50% - 3px);
        }
      }

      button {
        appearance: none;
        font: 18px / 0.82 var(--font-sans);
        font-weight: bold;
        background: none;
        border: 0;
        cursor: pointer;
      }
    }

    > a {
      --index: 0;
      --shade: #ccc;
      display: block;
      background-color: var(--shade);
      text-align: center;
      border-radius: 20px 20px 0 0;
      position: relative;
      padding: 46px var(--outside) 20px;
      transform: translateY(100px);
      opacity: 0;
      transition: .1s;
      transition-delay: calc(.025s * var(--index));

      @media (max-width: 799px) {
        padding-block: 30px;
      }

      &:not(:has(p)) {
        @media (max-width: 799px) {
          padding-block: 50px;
        }
      }

      &:after {
        content: " ";
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        top: 100%;
        height: 20px;
        background-color: var(--shade);
      }

      small {
        --shade: var(--color-white);
        background-color: var(--shade);
        padding: 5px 10px 3px;
        border-radius: 5px;
        vertical-align: middle;
        margin-right: 15px;
      }

      span {
        display: inline-block;
        vertical-align: middle;
      }

      p {
        margin-top: 15px;
      }

      @media (hover: hover) {
        &:has(p) {
          p {
            margin: 0;
            height: 0;
            overflow: hidden;
            transition: .1s;
          }

          &:hover {
            padding-block: 35px 16px;

            p {
              margin-top: 15px;
              height: 1lh;
            }
          }
        }

        &:not(:has(p)):hover {
          padding-block: 50px;
        }
      }
    }

    &.exposed > a {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .scroll-into-view {
    transform: translateY(10vh);
    opacity: 0;
    transition: .5s;
    transition-delay: .25s;

    &.from-top {
      transform: translateY(-10vh);
    }

    &.in-view {
      transform: none;
      opacity: 1;
    }
  }

  .report-title {
    margin-top: 116px;
    text-align: center;
    text-transform: uppercase;

    @media (min-width: 800px) {
      margin-top: 200px;
    }
  }

  .report-subtitle {
    text-align: center;
    text-wrap: pretty;
    margin-block: 20px 30px;

    @media (min-width: 800px) {
      width: 50%;
      margin: 52px auto 39px;
    }
  }

  .cover {
    grid-column: 1 / span 25;
    aspect-ratio: 1416 / 737;
    margin: 0 8px 100px;
  }

  .intro-illustration {
    width: 100%;
    height: 92px;
    display: flex;
    justify-content: flex-end;
    margin-block: -145px -20px;

    @media (min-width: 800px) {
      height: 162px;
      margin-block: -211px 100px;
    }

    img {
      height: 100%;
      width: auto;
      margin-right: 19px;

      @media (min-width: 800px) {
        margin-right: calc(var(--outside) + var(--column));
      }
    }
  }

  .webinar {
    display: none;

    @media (min-width: 800px) {
      display: block;
      position: absolute;
      right: var(--outside);
      top: calc(var(--admin-bar-offset) + 52px);
    }

    &:before {
      content: " ";
      display: inline-block;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 41 25'%3E%3Cpath fill='%23171d1a' d='M11.606 24.328q3.36-2.208 3.36-5.76 0-2.64-2.688-5.376l3.552.192q2.256.096 4.032 1.008 1.776.864 4.032 2.832 2.256 1.92 4.176 3.024t3.312 1.104q1.776 0 3.168-.576 1.344-.576 2.16-2.016.384-.672.768-1.44.336-.816.624-1.728.336-1.152.768-1.68t1.152-.816q.336-.144.576-.24.192-.096.192-.336 0-.576-.768-.624-1.152-.144-1.92-2.448-.576-1.776-1.392-3.168-.864-1.44-2.208-2.016-1.392-.576-3.12-.576-1.584 0-3.6 1.2t-4.368 3.264q-2.4 2.064-4.224 2.736t-3.36.768l-3.552.192q2.688-2.832 2.688-5.376 0-3.552-3.36-5.76a24.3 24.3 0 0 1-2.4 4.416Q7.766 7.096 5.558 8.92q-2.256 1.776-5.568 3.6 3.552 1.968 5.808 3.84 2.208 1.824 3.552 3.744a24 24 0 0 1 2.256 4.224'/%3E%3C/svg%3E") no-repeat center center;;
      background-size: contain;
      width: 25px;
      height: 12px;
      transform: rotate(180deg);
      margin-right: .25ch;
    }

    &:has(a:hover):before {
      opacity: .6;
    }

    a {
      text-decoration: underline;
      text-decoration-thickness: 0%;

      &:hover {
        color: var(--color-gray);
      }
    }
  }

  .quote-card {
    --shade: #ccc;
    background: url('/wp-content/themes/Cogenerate/img/report-faith-2025/paper.svg') center center;
    background-color: var(--shade);
    padding: 24px;
    border-radius: 4px;

    @media (min-width: 800px) {
      padding: 30px;
    }

    .quote > *:first-child:before {
      content: "“";
      position: absolute;
      text-indent: -1ch;
    }

    .quote > *:last-child:after {
      content: "”";
    }

    .quote-name {
      margin-top: 14px;
      display: flex;
      align-items: flex-end;
      gap: 24px;

      &:has(img) {
        @media (min-width: 800px) {
          margin-top: 50px;
        }
      }
    }

    img {
      display: inline-block;
      background-color: #000;
      width: 60px;
      height: 60px;
      flex: 0 0 60px;
      border-radius: 50%;
      overflow: hidden;
      vertical-align: bottom;

      @media (min-width: 800px) {
        width: 80px;
        height: 80px;
        flex-basis: 80px;
      }
    }
  }

  .quote-tower {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: -20px;

    @media (min-width: 800px) {
      margin-top: 0;
      grid-column: 2 / span 9;
    }

    .quote-card {
      --shade: magenta;
      transform-origin: center center;
      transform: rotate(-2deg);
      box-shadow: 5px 10px 17.3px 0px #0000000D;

      @media (min-width: 800px) {
        width: 80%;
      }

      &:nth-child(2n) {
        align-self: flex-end;
        transform: rotate(2deg);
      }
    }
  }

  .intro {
    margin-top: 30px;

    @media (min-width: 800px) {
      margin-top: 0;
      grid-column: 14 / span 9;
    }
  }

  strong[title] {
    --shade: transparent;
    --toltip-shade: var(--color-white);
    --x: 0px;
    --y: 0px;

    cursor: default;
    background-color: var(--shade);

    span {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      transform: translateX(var(--x)) translateY(var(--y));
      font: 13px / 1.2 var(--font-monospace);
      letter-spacing: 0 !important;
      text-transform: uppercase;
      background-color: var(--tooltip-shade);
      padding: 5px 15px;
      border-radius: 5px;
    }

    &:hover span {
      display: block;
    }
  }

  .byline {
    line-height: 40px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 50px;

    + .byline {
      margin-top: 20px;
    }

    figure {
      background-color: #000;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      flex: 0 0 80px;
    }

    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
    }
  }

  .data,
  .language {
    background-color: var(--color-teal-light);
    padding: 20px var(--gutter);
    margin-bottom: 36px;
    border-radius: 10px;
    position: relative;

    @media (min-width: 800px) {
      padding: 77px calc(var(--column) + var(--gutter));
    }

    figure {
      max-width: 100px;
    }
  }

  .data {
    margin-top: 100px;
    display: grid;
    gap: 10px;
    position: relative;

    @media (min-width: 800px) {
      margin-top: 188px;
      gap: 30px;
      grid-template-columns: 1fr 1fr;
    }

    .top-illustration {
      position: absolute;
      left: 50%;
      bottom: calc(100% - 12px);
      max-width: 110px;

      @media (min-width: 800px) {
        max-width: 144px;
      }
    }

    .preamble {
      margin-block: 10px 20px;

      @media (min-width: 800px) {
        margin: 0;
      }
    }

    .figure {
      @media (min-width: 800px) {
        width: 80%;
        display: flex;
        gap: 16px;
      }

      span {
        display: block;

        @media (max-width: 799px) {
          font-size: 48px
        }
      }
    }

    p:not(:last-child) {
      margin-bottom: 1lh;
    }

    > p:has(a) {
      @media (min-width: 800px) {
        grid-column: 2;
      }
    }

    p.h5 {
      border-top: 1px solid var(--color-gray);
      padding-top: 30px;
      margin-bottom: 10px;

      @media (min-width: 800px) {
        margin: 0;
        grid-column: 1 / span 2;
      }
    }

    .block {
      grid-column: 1;
      background-color: var(--color-white);
      padding: 20px 15px;
      border-radius: 5px;
    }

    .block:has(img) {
      @media (min-width: 800px) {
        grid-column: 2;
        grid-row: 3 / span 2;
      }
    }

    .block img {
      display: block;
      margin-top: 30px;
      width: 100%;

      @media (min-width: 800px) {
        width: 80%;
      }
    }

    .block + :not(.block) {
      margin-top: 20px;
    }

    a {
      color: inherit;
      text-decoration: underline;
    }

    .bottom-illustration {
      max-width: 158px;

      @media (min-width: 800px) {
        max-width: 282px;
        margin-block: -40px;
      }
    }
  }

  .language {
    display: flex;
    flex-direction: column;

    figure {
      max-width: 112px;
      margin-block: 20px;
      align-self: flex-end;

      @media (min-width: 800px) {
        position: absolute;
        margin: 0;
        right: 115px;
      }
    }

    .h4 {
      order: -1;
    }

    .content {
      margin-top: 30px;

      @media (min-width: 800px) {
        margin-top: 110px;
        columns: 2;
        column-gap: var(--gutter);
      }
    }
  }

  .h1 small {
    display: block;
    width: fit-content;
    background-color: var(--color-white);
    border-radius: 5px;
    margin: 0 auto 30px;
    padding: 5px 10px 3px;
    text-transform: uppercase;
  }

  .slice {
    --shade: var(--color-blue);
    --shade-light: var(--color-white);
    --shade-back: var(--shade-light);

    grid-column: 1 / span 25;
    display: grid;
    grid-template-columns: subgrid;
    border-radius: 20px 20px 0 0;
    background-color: var(--shade-back);
    overflow: hidden;
    padding-bottom: 50px;

    &:has(+ .slice) {
      margin-bottom: -20px;
    }

    .heading {
      grid-column: 1 / span 25;
      background-color: var(--shade);
      text-align: center;
      padding-block: 40px;
      margin-bottom: 32px;

      @media (min-width: 800px) {
        padding-block: 80px 70px;
        margin-bottom: 89px;
      }

      .h1 {
        margin-bottom: 30px;
      }
    }

    .h1 small {
      background-color: var(--shade-light);
    }
  }

  .intro-quote {
    text-align: center;
    grid-column: 2 / span 23;
    margin-bottom: 30px;

    @media (min-width: 800px) {
      grid-column: 6 / span 15;
      margin-bottom: 112px;
    }

    .quote {
      margin-bottom: 37px;
    }

    .quote:before {
      content: "“";
      position: absolute;
      text-indent: -1ch;
    }

    .quote:after {
      content: "”";
    }

    figure {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      margin: 37px auto 20px;
    }
  }

  .column {
    grid-column: 2 / span 23;

    @media (min-width: 800px) {
      grid-column: 2 / span 11;
    }

    .content {
      @media (min-width: 800px) {
        width: 80%;
      }
    }

    .quote-card {
      margin-block: 44px 50px;

      @media (min-width: 800px) {
        width: 80%;
        margin-block: 86px 0;
      }
    }

    figure.spot {
      width: 66%;
      margin-top: 50px;
      margin-left: 34%;
    }

    + .column {
      @media (min-width: 800px) {
        grid-column: 14 / span 11;
      }
    }
  }

  .quotes-stack {
    --upper-padding: 150px;
    --length: 1;

    margin-block: 65px 32px;
    grid-column: 2 / span 23;
    position: relative;
    z-index: 1;
    padding-top: var(--upper-padding);

    @media (min-width: 800px) {
      margin-block: 100px 134px;
      grid-column: 8 / span 11;
    }

    .cards {
      display: grid;
      align-items: flex-end;
      max-width: 570px;
      margin: 0 auto 40px;
    }

    .quote-card {
      --index: 0;
      --direction: 0;
      --slide-distance: 25%;

      grid-column: 1;
      grid-row: 1;
      height: fit-content;
      transform: rotate(var(--rotation)) translateX(calc(var(--direction) * var(--slide-distance)));
      transition: transform .25s ease, z-index .25s step-end;
      position: relative;
      box-shadow: 5px 10px 15px #00000006;
      z-index: var(--index);
    }

    &.sliding .quote-card {
      --direction: 1;
    }

    &.sliding:not(.reversed) .quote-card.single,
    &.sliding.reversed .quote-card:not(.single) {
      --direction: -1;
    }
  }

  .quotes-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;

    button {
      appearance: none;
      overflow: hidden;
      cursor: pointer;
      text-indent: -100vw;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 41 25'%3E%3Cpath fill='%23171d1a' d='M11.606 24.328q3.36-2.208 3.36-5.76 0-2.64-2.688-5.376l3.552.192q2.256.096 4.032 1.008 1.776.864 4.032 2.832 2.256 1.92 4.176 3.024t3.312 1.104q1.776 0 3.168-.576 1.344-.576 2.16-2.016.384-.672.768-1.44.336-.816.624-1.728.336-1.152.768-1.68t1.152-.816q.336-.144.576-.24.192-.096.192-.336 0-.576-.768-.624-1.152-.144-1.92-2.448-.576-1.776-1.392-3.168-.864-1.44-2.208-2.016-1.392-.576-3.12-.576-1.584 0-3.6 1.2t-4.368 3.264q-2.4 2.064-4.224 2.736t-3.36.768l-3.552.192q2.688-2.832 2.688-5.376 0-3.552-3.36-5.76a24.3 24.3 0 0 1-2.4 4.416Q7.766 7.096 5.558 8.92q-2.256 1.776-5.568 3.6 3.552 1.968 5.808 3.84 2.208 1.824 3.552 3.744a24 24 0 0 1 2.256 4.224'/%3E%3C/svg%3E") no-repeat center center;
      border: none;
      background-size: contain;
      width: 46px;
      height: 48px;

      ~ button {
        transform: rotate(180deg);
      }
    }
  }

  .practice {
    --shade: var(--color-white);
    --shade-light: var(--color-gray-light);
    --shade-back: var(--color-white);

    .heading {
      background-color: transparent;
      padding-block: 40px;

      @media (min-width: 800px) {
        padding-block: 120px 60px;
      }
    }

    h2 {
      text-align: center;
      grid-column: 2 / span 23;
    }

    .intro {
      text-align: center;
      margin-inline: auto;
      width: calc(100% - 2 * var(--outside));

      @media (min-width: 800px) {
        width: 60%;
      }
    }

    figure.spot {
      grid-column: 1 / span 25;
      width: 100%;
      height: 92px;
      position: relative;
      margin-block: -50px -16px;

      @media (min-width: 800px) {
        margin-block: -144px 0;
        transform: translateY(20px);
        height: 155px;
      }

      img {
        height: 100%;
        width: auto;
        position: absolute;
        right: 6%;
      }
    }

    .media {
      grid-column: 1 / span 25;
      display: grid;
      gap: 10px;
      grid-auto-rows: auto;
      padding-inline: 10px;

      @media (min-width: 800px) {
        grid-template-columns: 1fr 1fr;
      }

      > div {
        --shade: #ccc;
        background: url('/wp-content/themes/Cogenerate/img/report-faith-2025/paper.svg') center center;
        background-color: var(--shade);
        border-radius: 5px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        @media (min-width: 800px) {
          padding: 30px;
        }
      }

      .practice-grid-quotes > *:first-child:before {
        content: "“";
        position: absolute;
        text-indent: -1ch;
      }

      .practice-grid-quotes > *:last-child:after {
        content: "”";
      }

      .video figure {
        flex: 0 0 auto;
        border-radius: 5px;
        background-color: #000;
        margin: 20px 0 25px;
        overflow: hidden;
        position: relative;

        &:not(:has(video[controls])):after {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 59 59'%3E%3Crect width='58' height='58' x='.524' y='.309' fill='%23fdfbf6' rx='29'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M25.915 25.707a.98.98 0 0 1 1.36-.785 42 42 0 0 1 4.308 2.184 42 42 0 0 1 4.046 2.639.98.98 0 0 1 .001 1.57c-.61.459-2.009 1.46-4.047 2.638-2.04 1.177-3.608 1.888-4.309 2.187a.978.978 0 0 1-1.359-.785c-.092-.761-.264-2.49-.264-4.825 0-2.333.172-4.061.264-4.823' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center;
          background-size: 58px;
          pointer-events: none;
        }
      }

      video {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        cursor: pointer;
      }

      .quote-name {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        margin-top: 14px;

        @media (min-width: 800px) {
          gap: 24px;
        }

        img {
          display: inline-block;
          background-color: #000;
          width: 60px;
          height: 60px;
          flex: 0 0 60px;
          border-radius: 50%;
          overflow: hidden;
          vertical-align: bottom;

          @media (min-width: 800px) {
            width: 80px;
            height: 80px;
            flex-basis: 80px;
          }
        }
      }
    }
  }

  .reflections {
    --shade: var(--color-teal-light);
    --shade-light: var(--color-teal);
    --shade-back: var(--color-white);

    .heading {
      grid-column: 1 / span 25;
      text-align: center;
    }

    .heading-intro {
      width: calc(100% - 2 * var(--outside));
      margin-inline: auto;
      margin-bottom: 30px;

      @media (min-width: 800px) {
        width: 66%;
      }
    }

    .intro {
      grid-column: 2 / span 23;

      @media (min-width: 800px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gutter);
      }
    }

    .intro-content {
      margin-block: 20px 40px;

      @media (min-width: 800px) {
        width: 80%;
        margin-block: 20% 0;
      }
    }
  }

  .reflection {
    grid-column: 2 / span 23;
    background-color: var(--color-teal-light);
    padding: 27px var(--gutter);
    border-radius: 5px;

    @media (min-width: 800px) {
      padding: 40px calc(var(--column) / 2);
    }

    summary {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      cursor: pointer;
      padding: 27px var(--gutter);
      margin: -27px calc(-1 * var(--gutter));

      @media (min-width: 800px) {
        padding: 40px calc(var(--column) / 2);
        margin: -40px calc(var(--column) / -2);
      }
    }

    &[open] summary {
      margin-bottom: 13px;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::marker {
      display: none;
    }

    .reflection-control {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      align-content: center;
      display: block;

      @media (min-width: 800px) {
        grid-column: 2;
        grid-row: 1 / span 2;
      }

      span {
        display: flex;
        place-items: center;
        gap: 10px;
      }

      span span {
        display: block;
        line-height: 30px;
      }
    }

    &[open] .closed,
    &:not([open]) .open {
      display: none;
    }

    + .reflection {
      margin-top: 10px;
    }
  }

  .case-study-title {
    margin-top: 24px;

    @media (max-width: 799px) {
      grid-row: 2;
      grid-column: 1 / span 2;
    }
  }

  .steps {
    @media (min-width: 800px) {
      display: grid;
      grid-template-columns: 84px 1fr 50%;
      grid-auto-rows: auto;
      gap: 20px;
    }
  }

  .step {
    background-color: var(--color-white);
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: none;

    @media (min-width: 800px) {
      padding: 10px;
      margin: 0;
      grid-column: 1 / span 3;
      display: grid;
      grid-template-columns: subgrid;
      align-items: center;
      gap: 0;
    }

    figure {
      height: 84px;
      width: 84px;
    }
  }

  .for-reflection {
    margin-block: 50px 30px;
    text-align: center;

    h4 {
      margin-bottom: 32px;
    }

    li:before {
      content: " ";
      display: inline-block;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 41 25'%3E%3Cpath fill='%23171d1a' d='M11.606 24.328q3.36-2.208 3.36-5.76 0-2.64-2.688-5.376l3.552.192q2.256.096 4.032 1.008 1.776.864 4.032 2.832 2.256 1.92 4.176 3.024t3.312 1.104q1.776 0 3.168-.576 1.344-.576 2.16-2.016.384-.672.768-1.44.336-.816.624-1.728.336-1.152.768-1.68t1.152-.816q.336-.144.576-.24.192-.096.192-.336 0-.576-.768-.624-1.152-.144-1.92-2.448-.576-1.776-1.392-3.168-.864-1.44-2.208-2.016-1.392-.576-3.12-.576-1.584 0-3.6 1.2t-4.368 3.264q-2.4 2.064-4.224 2.736t-3.36.768l-3.552.192q2.688-2.832 2.688-5.376 0-3.552-3.36-5.76a24.3 24.3 0 0 1-2.4 4.416Q7.766 7.096 5.558 8.92q-2.256 1.776-5.568 3.6 3.552 1.968 5.808 3.84 2.208 1.824 3.552 3.744a24 24 0 0 1 2.256 4.224'/%3E%3C/svg%3E") no-repeat center center;;
      background-size: contain;
      width: 25px;
      height: 12px;
      transform: rotate(180deg);
      margin-right: .25ch;
    }
  }

  .conclusion {
    grid-column: 1 / span 25;
    display: grid;
    grid-template-columns: subgrid;

    > * {
      grid-column: 1 / span 25;
    }

    .h1 {
      text-align: center;
      margin: 60px 0 49px;
    }

    .cover {
      @media (max-width: 799px) {
        margin-bottom: 67px;
      }
    }

    > .content {
      grid-column: 2 / span 23;

      @media (min-width: 800px) {
        columns: 2;
        grid-column: 4 / span 18;
      }
    }

    .post-content {
      grid-column: 14 / span 9;
      margin-bottom: 150px;
    }
  }

  .participants {
    grid-column: 2 / span 23;
    margin: 50px 0 80px;
    position: relative;

    &:after {
      content: " ";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 40px;
      background: linear-gradient(to bottom, #C9D8DC00, var(--color-gray-light));
      opacity: .5;
    }

    .list {
      margin-top: 50px;
      max-height: 70vh;
      overflow-y: auto;
      border-bottom: 3px solid var(--color-black);
      padding-bottom: 40px;
    }

    .legend {
      padding: 30px 10px;
      background-color: var(--color-teal-light);
    }
  }

  .participant {
    padding-block: 20px;
    border-bottom: 1px solid #00000073;

    a {
      text-decoration: underline;
    }

    span:not(:last-child):after {
      content: ", ";
    }
  }

  .final-sections {
    display: grid;
    grid-column: 2 / span 23;

    column-gap: var(--gutter);
    row-gap: 105px;

    @media (min-width: 800px) {
      grid-template-columns: 1fr 1fr;
    }

    > div {
      display: grid;
      grid-template-rows: auto 1fr auto;
    }

    .title {
      margin-bottom: 50px;
    }

    .content {
      grid-row: 2 / span 2;
    }

    .acknowledgements p {
      @media (min-width: 800px) {
        width: 80%;
      }
    }

    .credits p {
      margin-bottom: .5lh;
    }

    .engage a {
      display: block;
      width: fit-content;
      padding: 15px;
      border-radius: 5px;
      background-color: var(--color-orange);
      margin-bottom: 10px;

      /* h3 */
      font: 24px / 1.2 var(--font-script);
      font-feature-settings: "swsh" on;
      letter-spacing: -0.04em !important;
      font-style: italic;

      @media (min-width: 800px) {
        /* h5 */
        font-size: 32px;
        letter-spacing: -0.03em !important;
        font-style: italic;
      }
    }

    .engage p:nth-child(2) a {
      background-color: var(--color-purple);
    }

    .engage p:nth-child(3) a {
      background-color: var(--color-brown);
    }

    .social .content {
      display: flex;
      gap: 25px;
      grid-row: 2;
    }

    .social a {
      display: block;
      width: 30px;
      height: 30px;
      white-space: nowrap;
      text-indent: -100vw;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;

      &[href*="tiktok"] {
        background-image: url("/wp-content/uploads/2025/04/cg-report-2025__ui__tiktok-logo.png");
      }

      &[href*="linkedin"] {
        background-image: url("/wp-content/uploads/2025/04/cg-report-2025__ui__linkedin-logo.png");
      }

      &[href*="instagram"] {
        background-image: url("/wp-content/uploads/2025/04/cg-report-2025__ui__instagram-logo.png");
      }
    }

    .copyright {
      font-size: 16px;
      margin-top: 25px;

      @media (min-width: 800px) {
        margin-top: 0;
      }
    }
  }

  + .cg-report-2025__footer {
    background-color: var(--color-black);
    color: var(--color-white);
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    font-family: var(--font-sans);

    .et_pb_row {
      padding: 27px var(--gutter);
      width: 100%;
      max-width: 100%;
    }

    .et_pb_row:first-child {
      display: grid;
      gap: calc(var(--column) + var(--gutter));

      @media (min-width: 800px) {
        grid-template-columns: 2fr 1fr;
      }
    }

    .cg-report-2025__footer-links {
      padding-top: 2lh;
    }

    .cg-report-2025__footer-links a {
      display: block;
      white-space: nowrap;
      border-radius: 10px;
      background-color: var(--color-teal-light);
      color: var(--color-black);
      margin-bottom: 10px;
      padding: 15px;
      font-size: 18px;
      text-align: center;

      @media (min-width: 800px) {
        width: fit-content;
        padding-inline: 30px;
      }
    }
  }
}